/*
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 {
  /* Evita scroll horizontal accidental por contenido desbordado
     (usa -clip sobre -hidden para no romper position: sticky). */
  @supports (overflow: clip) {
    html,
    body {
      overflow-x: clip;
    }
  }

  *,
  *::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;
    --secundary-color-light: #b8ffff;
    --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 {
      grid-area: logo;
      padding: 0.5rem 0.5rem 0.5rem 0;
    }

    .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 {
    .vetbox-breadcrumb {
      margin: 0.5rem 0 1rem;
      font-size: 0.875rem;
      line-height: 1.5;
      color: var(--mp-azul-o);
    }

    .vetbox-breadcrumb--light {
      color: var(--text-white);
    }

    .vetbox-breadcrumb__list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .vetbox-breadcrumb__item {
      display: inline-flex;
      align-items: center;
    }

    .vetbox-breadcrumb__item a:not(.vetbox-breadcrumb__home) {
      color: inherit;
      text-decoration: none;
      text-underline-offset: 0.2em;
      transition: text-decoration-color 0.15s ease;
    }

    .vetbox-breadcrumb__item a:not(.vetbox-breadcrumb__home):hover,
    .vetbox-breadcrumb__item a:not(.vetbox-breadcrumb__home):focus-visible {
      text-decoration: underline;
    }

    .vetbox-breadcrumb__sep {
      margin: 0 0.5rem;
      opacity: 0.55;
    }

    .vetbox-breadcrumb__home {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      line-height: 1;
      color: inherit;
      text-decoration: none !important;
    }

    .vetbox-breadcrumb__home:hover {
      text-decoration: none;
    }

    .vetbox-breadcrumb__home-icon {
      display: block;
      width: 1.25em;
      height: 1.25em;
      transition: stroke-width 0.15s ease;
    }

    .vetbox-breadcrumb__home:hover .vetbox-breadcrumb__home-icon,
    .vetbox-breadcrumb__home:focus-visible .vetbox-breadcrumb__home-icon {
      stroke-width: 3px;
    }
  }
  @layer barra-fija-producto {
    .barra-producto {
      background-color: var(--primary-dark, #093b64);
      color: #fff;
      width: 100%;
      position: sticky;
      bottom: 0;
      z-index: 20;
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    }

    .barra-producto.barra-visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .barra-producto-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1rem;
      padding: 1rem 0;
    }

    .barra-producto-nombre {
      font-family: "Play", sans-serif;
      font-size: 1.7rem;
      font-weight: 700;
      margin-right: auto;
    }

    .barra-producto-precio del {
      color: #fff;
      font-size: 1.1rem;
      text-decoration: line-through;
      font-weight: 400;
      margin-right: 0.5rem;
    }

    .barra-producto-precio ins,
    .barra-producto-precio > .woocommerce-Price-amount {
      color: #fff;
      font-size: 1.6rem;
      font-weight: 800;
      text-decoration: none;
    }

    .barra-producto-cta {
      background-color: var(--secondary-color, #00a6a6);
      color: #fff;
      font-family: "Play", sans-serif;
      font-weight: 800;
      font-size: 1.2rem;
      cursor: pointer;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-md, 8px);
      border: none;
      transition: filter 0.3s ease;
    }

    .barra-producto-cta:hover {
      filter: brightness(1.1);
    }

    @media (max-width: 768px) {
      .barra-producto .barra-producto-nombre,
      .barra-producto .barra-producto-precio,
      .barra-producto .barra-producto-precio del,
      .barra-producto .barra-producto-precio ins,
      .barra-producto .woocommerce-Price-amount {
        display: none;
      }

      .barra-producto-container {
        justify-content: center;
      }

      .barra-producto-cta {
        width: 100%;
        padding: 0.75rem 1rem;
      }
    }
  }

  @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;
    }

    .euristica-1-card-container-imagen .icon-euristica {
      width: 155px;
      height: 155px;
      object-fit: contain;
    }

    .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;
      object-position: top;
      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;
      font-family: "Play";
    }
    .hero-4-panel-mini {
      font-size: 2rem;
      font-family: "Play";
    }

    .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;
    }
    .productosx4-info {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      justify-content: space-between;
    }
    .productosx4-link {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      text-decoration: none;
      white-space: nowrap;

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

    .productosx4-link:hover {
      text-decoration: underline;
    }
  }
  @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);
      /* auto-fill mantiene las columnas a su ancho fijo aunque haya pocos
         productos (auto-fit las estiraba cuando quedaba una fila corta). */
      grid-template-columns: repeat(
        auto-fill,
        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;

      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;

      display: flex;
      width: 100%;
      height: 100%;
      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);
    }
    .label-compra-recurrente {
      padding: 4px 10px;
      border-radius: 100px;

      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;

      color: var(--secondary-color);
      border: solid 1px var(--secondary-color);
    }
    .label-compra-recurrente span {
      font-size: 14px;
      font-weight: 600;
      text-align: left;
      text-wrap: balance;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .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.8rem;
      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: 400;
      font-size: 0.9rem;
    }

    .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: clip;
      padding-bottom: 1rem;
    }

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

      /* El carril llena el alto de la fila del grid para que el sticky tenga recorrido */
      .carril {
        position: relative;
        height: 100%;
      }

      /* La galería queda como carril fijo mientras se navega la info */
      .carril .producto-imagenes,
      .contenedor-producto > .producto-imagenes {
        position: sticky;
        top: 0;
      }

      /* Caso single-product (galería como hijo directo del grid): que no estire */
      .contenedor-producto > .producto-imagenes {
        align-self: flex-start;
      }
    }

    /* ==========================================================================
   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;
      align-items: 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 */
    /* WooCommerce estiliza .button.alt fuera de @layer (morado #7F54B3) y con
       mayor especificidad; con !important dentro de la capa vencemos esa regla
       y aseguramos el look & feel Vetbox (misma lógica que la pasarela y
       mochilas-premium). */
    .producto-agregar-carrito .single_add_to_cart_button {
      flex-grow: 1; /* Que ocupe el resto del ancho */
      background-color: var(--primary-color) !important;
      color: var(--text-white) !important;
      border: none !important;
      border-radius: 8px !important;
      padding: 1rem !important;
      font-size: 1.2rem !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      transition:
        background 0.3s,
        opacity 0.3s;
    }

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

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

    /* 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;
    }
    /*Compra Recurrente*/
    .producto-compra-recurrente-1 {
      --padding: 10px;

      border: solid 1px var(--secondary-color);
      border-radius: var(--radius-sm);
      padding: var(--padding);

      display: flex;
      flex-direction: row;
      gap: var(--padding);
      align-items: center;
      justify-content: space-between;
    }
    .producto-compra-recurrente-2 {
      display: flex;
      flex-direction: column;
      svg {
        width: 20px;
        height: 20px;
        color: var(--secondary-color);
      }
      border-right: solid 1px var(--secondary-color);
      padding-right: var(--padding);
    }
    .producto-compra-recurrente-precio {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: var(--padding);
      font-weight: 600;
      font-size: 1.2rem;
    }
    .producto-compra-recurrente-msg-1 {
      font-size: 0.8rem;
    }

    .producto-compra-recurrente-msg-2 {
      font-weight: 600;
      font-size: 1rem;
    }
    .producto-compra-recurrente-3 {
      display: flex;
      flex-direction: column;
    }
    .producto-compra-recurrente-cta {
      width: auto;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;
      border: solid 1px var(--secondary-color);
      border-radius: var(--radius-sm);
    }
    .producto-compra-recurrente-cta span {
      background-color: var(--bg-lime);
      color: var(--text-main);
      font-size: 1rem;
      padding: 0.5rem 1rem;
      border-radius: 100vw;
      text-wrap: balance;

      display: flex;
      flex-direction: row;
      gap: 1rem;
      justify-content: center;
      align-items: center;

      svg {
        width: 30px;
        height: 30px;
      }
    }
    .producto-compra-recurrente-cta-btns {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      width: 100%;
      justify-content: space-between;
    }
    .producto-compra-recurrente-cta-1,
    .producto-compra-recurrente-cta-2 {
      border: solid 1px;
      padding: 0.5rem;
      border-radius: var(--radius-sm);
      font-size: 1.2rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

    .producto-compra-recurrente-cta-1 {
      color: var(--primary-color);
      border-color: var(--primary-color);
    }

    .producto-compra-recurrente-cta-2 {
      color: var(--text-white);
      border-color: var(--primary-color);
      background-color: var(--primary-color);
    }
    .producto-descripcion-corta {
      font-size: 1.2rem;
    }
    /* 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%;
      }
      .producto-compra-recurrente {
        width: 100%;
      }
      .producto-compra-recurrente-1 {
        flex-direction: column;
        align-items: flex-start;
      }
      .producto-compra-recurrente-2 {
        border-right: none;
        padding-right: 0;
      }
      .producto-compra-recurrente-3 {
        border-top: solid 1px var(--secondary-color);
        padding-top: var(--padding);
        width: 100%;
      }
      .producto-compra-recurrente-cta-btns {
        flex-direction: column;
      }
    }

    /*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: flex-start;
      margin-top: 1rem;
      gap: 1rem;

      img {
        max-width: 300px !important;
      }
    }

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

      a {
        color: var(--primary-color);
        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: var(--primary-light);
      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;
      overflow: hidden;
    }

    .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/2026/06/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;
      padding-bottom: 2rem;
    }

    .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: 1.5rem;

      grid-template-columns: 1fr 1fr;
    }
    .faq-card {
      background: linear-gradient(145deg, var(--bg-lime) 0%, #eef8e4 100%);
      border-radius: 16px;
      border: 1px solid rgba(0, 78, 138, 0.1);
      box-shadow: 0 4px 18px rgba(0, 78, 138, 0.06);
      padding: 1.75rem 2rem;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

      p {
        margin: 0;
      }
    }
    .faq-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 28px rgba(0, 78, 138, 0.12);
      border-color: rgba(0, 166, 166, 0.4);
    }
    .faq-card-titulo {
      position: relative;
      padding-left: 1.25rem;
      margin: 0;
      color: var(--primary-color);
      line-height: 1.3;
    }
    .faq-card-titulo::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.18em;
      bottom: 0.18em;
      width: 5px;
      border-radius: 999px;
      background: var(--secondary-color);
    }
    @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;
    }
    @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;
  }
  /* Fix overflow móvil: los grid items no deben crecer por encima del
     contenedor (min-width:auto los hinchaba a ~1056px con imágenes grandes). */
  .blog-contenido-container > * {
    min-width: 0;
  }
  .blog-content {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }
  .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-content {
    font-size: 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-comentarios {
    .blog-comentarios {
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid var(--border-color);
    }

    .blog-comentarios-titulo {
      font-family: "Play", sans-serif;
      font-size: 1.9rem;
      font-weight: 700;
      color: var(--primary-color);
      margin-bottom: 1.5rem;
    }

    .comment-list {
      list-style: none;
      margin: 0 0 2rem;
      padding: 0;
    }

    .comment-list .comment-body {
      background: #fff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 1.25rem;
      margin-bottom: 1rem;
    }

    .comment-list .comment-author {
      font-family: "Play", sans-serif;
      font-weight: 700;
      color: var(--text-main);
    }

    .comment-list .comment-author .avatar {
      border-radius: 50%;
      margin-right: 0.6rem;
      vertical-align: middle;
    }

    .comment-list .comment-metadata {
      font-size: 0.85rem;
    }

    .comment-list .comment-metadata a {
      text-decoration: none;
    }

    .comment-list .comment-content {
      color: var(--text-main);
      margin-top: 0.6rem;
    }

    .comment-list .comment-content p {
      margin: 0 0 0.6rem;
    }

    .comment-list .children {
      list-style: none;
      padding-left: 2rem;
    }

    .comment-list .reply a {
      font-weight: 700;
      text-decoration: none;
    }

    .comment-list .reply a:hover {
      text-decoration: underline;
    }

    .comment-navigation {
      margin-bottom: 1.5rem;
    }

    .comment-respond h3 {
      font-family: "Play", sans-serif;
      color: var(--primary-color);
      font-size: 1.5rem;
    }

    .comment-form label {
      display: block;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-main);
      margin-bottom: 0.3rem;
    }

    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"],
    .comment-form textarea {
      width: 100%;
      padding: 0.7rem 0.9rem;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      background: #fff;
      color: var(--text-main);
      font-size: 1rem;
      margin-bottom: 1rem;
    }

    .comment-form textarea {
      min-height: 120px;
    }

    .comment-form .submit {
      background-color: var(--primary-color);
      color: #fff;
      border: none;
      border-radius: var(--radius-md);
      padding: 0.7rem 1.4rem;
      font-family: "Play", sans-serif;
      font-weight: 800;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .comment-form .submit:hover {
      background-color: var(--primary-dark);
    }

    .comment-notes,
    .logged-in-as {
      font-size: 0.9rem;
      color: var(--text-muted);
    }

    .must-log-in {
      font-size: 1rem;
      padding: 1rem;
      background: var(--primary-light);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      margin-bottom: 1rem;

      a {
        font-weight: 700;
        color: var(--primary-dark);
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-decoration-color: var(--secondary-color);
      }
    }

    .blog-comentarios-cerrados {
      color: var(--text-muted);
    }
  }

  @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;
      font-weight: bold;
      transition: all 0.3s ease;
    }

    .nking-reletbox-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 */
      font-weight: bold;
      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: 0.5rem;
    }
    .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: left;
  }
  .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 .hero-home-6-deco {
    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 .icon-hero {
    height: 95px;
    width: 95px;
  }
  .hero-home-6-card span {
    color: var(--text-main);
    text-align: center;
  }

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

  .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 .hero-home-6-deco {
      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 .icon-hero {
      height: 65px;
      width: 65px;
    }
    .hero-home-6-card span {
      display: none;
    }

    .hero-home-6-card a {
      font-size: 12px;
      font-weight: 400;
    }
    .hero-home-6-cards-container {
      gap: 10px;
      padding: 0;
    }
  }
}
@layer publicidad-blog {
  .banner-publicidad-1-container {
    position: sticky;
    bottom: 0;
    width: auto;
    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: 350px;
  }
  .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 */
  }
  .banner-publicidad-wrapper {
    max-width: var(--ancho-global);
    margin-right: auto;
  }
  @media (max-width: 768px) {
    .banner-publicidad-1-container img {
      height: auto;
    }
  }
}
@layer modulo-wsp {
  .modulo-wsp {
    background-color: var(--bg-body);
    padding: 2rem 0;
  }
  .modulo-wsp-container {
    background-color: var(--primary-light);
    height: auto;
    border-radius: var(--radius-md);

    display: flex;
    flex-direction: row;
    gap: 2rem;

    padding: 2rem;

    position: relative;
  }
  .modulo-wsp-1 {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    width: 70%;
  }
  .modulo-wsp-2 {
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }

  .modulo-wsp-3 {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    justify-content: center;
  }
  .modulo-wsp-2 .logo-whatsapp {
    width: 100px;
    height: 100px;
  }
  .modulo-wsp-texto-1 {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.5rem;
  }

  .modulo-wsp-texto-2 {
    color: var(--primary-color);
    font-size: 1.2rem;
    text-wrap: pretty;
  }
  .modulo-wsp-foto {
    position: absolute;
    bottom: 0;
    right: 200px;
    height: 150%;
  }
  .modulo-wsp-cta {
    font-size: 1rem;
  }

  @media (max-width: 768px) {
    .modulo-wsp-container {
      padding: 1rem;
      width: 100%;
    }

    .modulo-wsp-1 {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
      justify-content: center;
      width: 80%;
    }
    .modulo-wsp-2 {
      gap: 1rem;
    }
    .modulo-wsp-texto-1,
    .modulo-wsp-texto-2 {
      font-size: 14px;
    }
    .modulo-wsp-texto-2 {
      text-wrap: balance;
    }
    .modulo-wsp-2 .logo-whatsapp {
      width: 50px;
      height: 50px;
    }
    .modulo-wsp-cta {
      font-size: 14px;
      padding: 0.5rem 1rem;
    }

    .modulo-wsp-foto {
      position: absolute;
      bottom: 0;
      right: 0;
      height: 130%;
    }
  }
}
@layer modulo-cbd {
  .modulo-cbd {
    background-color: var(--bg-body);
    padding: 2rem 0;
  }
  .modulo-cbd-container {
    background-color: var(--bg-lime);
    height: auto;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;

    position: relative;
    border-radius: var(--radius-md);
    justify-content: center;
  }
  .modulo-cbd-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    justify-content: center;
  }
  .modulo-cbd-titulo {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 600;
  }
  .modulo-cbd-info {
    color: var(--text-main);
    font-size: 1.2rem;
    line-height: 1.2;
  }
  .modulo-cbd-foto {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 768px) {
    .modulo-cbd-titulo,
    .modulo-cbd-info {
      font-size: 1rem;
    }
  }
}
@layer modulo-compra-recurrente {
  .modulo-compra-recursiva {
    background-color: var(--bg-body);
    padding: 2rem 0;
  }
  .modulo-compra-recursiva-container {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    background-color: var(--primary-light);
    padding: 2rem;
    border-radius: var(--radius-sm);
    position: relative;
  }
  .modulo-compra-recursiva-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    align-items: flex-start;
    justify-content: center;
  }
  .modulo-compra-recursiva-titulo {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--secondary-color);
  }
  .modulo-compra-recursiva-texto {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary-color);
  }
  .modulo-compra-recursiva-card {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
    color: var(--primary-color);
  }

  .modulo-compra-recursiva-card span {
    font-weight: 600;
    font-size: 1rem;
  }
  .modulo-compra-recursiva-foto img {
    height: 500px;
  }

  @media (max-width: 768px) {
    .modulo-compra-recursiva-container {
      padding: 1rem;
    }
    .modulo-compra-recursiva-titulo {
      font-size: 12px;
    }
    .modulo-compra-recursiva-texto {
      font-size: 1rem;
    }
    .modulo-compra-recursiva-card span {
      font-size: 0.8rem;
    }
    .modulo-compra-recursiva-foto img {
      position: absolute;
      height: auto;
      right: 0;
      bottom: 0;
      object-fit: cover;
      width: 200px;
    }
    .modulo-compra-recursiva-info {
      width: 80%;
      z-index: 10;
    }
  }
}
@layer modulo-triple {
  .modulo-triple {
    background-color: var(--bg-body);
    padding: 2rem 0;
  }
  .modulo-triple-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* --- Fondos decorativos (light) --- */
  .modulo-triple .modulo-wsp-container {
    background-image:
      radial-gradient(
        circle at 88% 25%,
        rgba(0, 166, 166, 0.16),
        transparent 42%
      ),
      linear-gradient(120deg, var(--primary-light) 0%, #eef9ff 100%);
  }

  .modulo-triple .modulo-cbd-container {
    background-image:
      url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20width%3D'64'%20height%3D'64'%20viewBox%3D'0%200%2064%2064'%3E%3Cg%20fill%3D'%2300a6a6'%20fill-opacity%3D'0.06'%3E%3Cpath%20d%3D'M16%2018%20C%2025%2012%2025%2026%2016%2032%20C%207%2026%207%2012%2016%2018%20Z'/%3E%3Cpath%20d%3D'M48%2018%20C%2039%2012%2039%2026%2048%2032%20C%2057%2026%2057%2012%2048%2018%20Z'/%3E%3Cpath%20d%3D'M16%2046%20C%2025%2040%2025%2054%2016%2060%20C%207%2054%207%2040%2016%2046%20Z'/%3E%3Cpath%20d%3D'M48%2046%20C%2039%2040%2039%2054%2048%2060%20C%2057%2054%2057%2040%2048%2046%20Z'/%3E%3C/g%3E%3Cg%20stroke%3D'%2300a6a6'%20stroke-opacity%3D'0.12'%20stroke-width%3D'1'%20fill%3D'none'%3E%3Cpath%20d%3D'M16%2022%20L16%2028'/%3E%3Cpath%20d%3D'M48%2022%20L48%2028'/%3E%3Cpath%20d%3D'M16%2050%20L16%2056'/%3E%3Cpath%20d%3D'M48%2050%20L48%2056'/%3E%3C/g%3E%3C/svg%3E"),
      radial-gradient(
        circle at 92% 12%,
        rgba(0, 166, 166, 0.12),
        transparent 45%
      ),
      linear-gradient(135deg, var(--bg-lime) 0%, #edf8e2 100%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size:
      64px 64px,
      auto,
      auto;
  }

  .modulo-triple .modulo-compra-recursiva-container {
    background-image:
      radial-gradient(
        circle at 82% 30%,
        rgba(0, 78, 138, 0.1) 0 48px,
        transparent 50px
      ),
      radial-gradient(
        circle at 82% 30%,
        rgba(0, 166, 166, 0.1) 0 92px,
        transparent 94px
      ),
      radial-gradient(
        circle at 82% 30%,
        rgba(0, 166, 166, 0.08),
        transparent 50%
      ),
      linear-gradient(130deg, var(--primary-light) 0%, #ecf8ff 100%);
  }

  @media (min-width: 769px) {
    .modulo-triple-container {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modulo-triple .modulo-wsp-container.wrapper,
    .modulo-triple .modulo-wsp-container {
      grid-column: 1 / -1;
      width: 100%;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
    }

    .modulo-triple .modulo-cbd-container {
      min-height: 200px;
    }
    .modulo-triple .modulo-cbd-info {
      flex: 1 1 40%;
    }
    .modulo-triple .modulo-cbd-foto {
      flex: 1 1 60%;
    }
    .modulo-triple .modulo-cbd-titulo,
    .modulo-triple .modulo-cbd-info {
      font-size: 1rem;
    }
    .modulo-triple .modulo-cbd-foto img {
      width: 100%;
      height: auto;
      border-radius: var(--radius-md);
    }

    .modulo-triple .modulo-compra-recursiva-container {
      min-height: 240px;
      gap: 1.5rem;
    }
    .modulo-triple .modulo-compra-recursiva-titulo {
      font-size: 12px;
    }
    .modulo-triple .modulo-compra-recursiva-texto {
      font-size: 1rem;
    }
    .modulo-triple .modulo-compra-recursiva-card span {
      font-size: 0.8rem;
    }
    .modulo-triple .modulo-compra-recursiva-foto img {
      position: absolute;
      right: 0;
      bottom: 0;
      height: auto;
      object-fit: cover;
      width: 38%;
      border-radius: var(--radius-md);
    }
    .modulo-triple .modulo-compra-recursiva-info {
      width: 80%;
      z-index: 10;
    }
  }
}

/* ==========================================================================
   SILLAS DE RUEDAS — single-sillas-de-ruedas.php
   Replica en parte el template de sillas de ruedas de producción.
   ========================================================================== */
@layer sillas-de-ruedas {
  /* ---------- Caja de asesoría de talla / WhatsApp ---------- */
  .sdr-cta-asesoria {
    margin: 1rem 0 1.25rem;
    padding: 1.25rem;
    background: var(--bg-white);
    border: 1px solid var(--primary-light);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
  }
  .sdr-cta-asesoria-titulo {
    margin: 0 0 0.5rem;
    font-family: var(--font-headings, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
  }
  .sdr-cta-asesoria-texto {
    margin: 0 0 0.9rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
  }
  .sdr-cta-asesoria-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius-md);
    border: 2px solid #25d366;
    background: transparent;
    color: #128c7e;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition:
      background 0.25s ease,
      color 0.25s ease,
      transform 0.15s ease,
      box-shadow 0.25s ease;
  }
  .sdr-cta-asesoria-boton:hover {
    background: #25d366;
    color: var(--text-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
  }
  .sdr-cta-asesoria-boton svg {
    flex: 0 0 auto;
  }

  /* ---------- Acordeones (Detalles / Guía de Tallas / Guía de Usos) ---------- */
  .sdr-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    width: 100%;
  }
  .sdr-toggle {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-white);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }
  .sdr-toggle-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-headings, inherit);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: left;
    user-select: none;
  }
  .sdr-toggle-headline::-webkit-details-marker {
    display: none;
  }
  .sdr-toggle-flecha {
    flex: 0 0 auto;
    color: var(--primary-color);
    transition: transform 0.25s ease;
  }
  .sdr-toggle[open] .sdr-toggle-flecha {
    transform: rotate(180deg);
  }
  .sdr-toggle[open] .sdr-toggle-headline {
    color: var(--primary-color);
  }
  .sdr-toggle-contenido {
    padding: 0 1.1rem 1.1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-main);
    border-top: 1px solid var(--border-color);
  }
  .sdr-toggle-contenido ul {
    margin: 0.75rem 0 0.5rem;
    padding-left: 1.2rem;
  }
  .sdr-toggle-contenido ul li {
    margin: 0.35rem 0;
  }
  .sdr-toggle-contenido p {
    margin: 0.75rem 0;
  }
  .sdr-toggle-contenido a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
  }
  .sdr-toggle-contenido a:hover {
    text-decoration: underline;
  }
  .sdr-toggle-contenido table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin: 1em 0;
  }
  .sdr-toggle-contenido th,
  .sdr-toggle-contenido td {
    border: 1px solid var(--border-color);
    padding: 0.6rem 0.75rem;
  }
  .sdr-toggle-contenido thead th {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 700;
  }
  .sdr-toggle-contenido img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
  }
  .sdr-toggle-contenido iframe {
    max-width: 100%;
  }

  /* ---------- Sección "Razas" + cards ---------- */
  .sdr-razas {
    background: var(--bg-body);
  }
  .sdr-razas-titulo {
    text-align: center;
    max-width: 56rem;
    margin: 0 auto 2rem;
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
    line-height: 1.35;
    color: var(--text-main);
  }
  .sdr-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .card-silla-de-ruedas {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition:
      box-shadow 0.25s ease,
      transform 0.25s ease;
  }
  .card-silla-de-ruedas:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
  }
  .card-silla-de-ruedas-imagen {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
  }
  .card-silla-de-ruedas-titulo {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.3;
  }
  .card-silla-de-ruedas-texto {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
  }

  /* ---------- Sección oscura "CON WALKIN' WHEELS…" ---------- */
  .sdr-walkin {
    background: linear-gradient(
      135deg,
      #0a3a6b 0%,
      var(--primary-color) 55%,
      var(--primary-dark) 100%
    );
    color: var(--text-white);
  }
  .sdr-walkin-titulo {
    margin: 0 0 2rem;
    text-align: center;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    letter-spacing: 0.02em;
    color: var(--text-white);
  }
  .sdr-walkin-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .card-silla-de-ruedas-2 {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-md);
    backdrop-filter: blur(4px);
  }
  .card-silla-de-ruedas-2-titulo {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-light);
  }
  .card-silla-de-ruedas-2-texto {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-white);
  }
  .sdr-walkin-banner {
    margin: 0 auto 2rem;
  }
  .sdr-walkin-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
  }
  .sdr-fabricacion {
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.75rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-md);
    text-align: center;
    backdrop-filter: blur(4px);
  }
  .sdr-fabricacion-titulo {
    margin: 0 0 0.75rem;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.3;
    color: var(--text-white);
  }
  .sdr-fabricacion-texto {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-white);
  }

  /* ---------- Descripción 2 col (texto + imagen) ---------- */
  .sdr-descripcion .descripcion-producto-container {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  .sdr-descripcion-texto {
    font-size: 1rem;
    line-height: 1.7;
  }
  .sdr-descripcion-texto h2 {
    color: var(--primary-color);
    margin-top: 1.5em;
  }
  .sdr-descripcion-texto h2:first-child {
    margin-top: 0;
  }
  .sdr-descripcion-texto ul {
    padding-left: 1.2rem;
  }
  .sdr-descripcion-imagen {
    position: sticky;
    top: 1.5rem;
  }
  .sdr-descripcion-imagen img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
  }

  /* ---------- Ritmo visual: spacing + fondos alternados ---------- */
  .sdr-razas {
    background: var(--primary-light);
    padding: 1.5rem 0;
  }
  .sdr-walkin {
    padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0;
  }
  .sdr-pagina .video-producto {
    background: var(--bg-white);
    padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0;
  }
  .video-producto-container {
    width: 100%;
    max-width: 56rem;
  }
  .video-responsive-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #000;
    box-shadow: var(--shadow-soft);
  }
  .video-responsive-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .sdr-descripcion {
    padding: 0 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  }
  .sdr-pagina .productos-relacionados {
    padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  }

  @media (max-width: 768px) {
    .sdr-cards,
    .sdr-walkin-cards,
    .sdr-descripcion .descripcion-producto-container {
      grid-template-columns: 1fr;
    }
    .sdr-descripcion-imagen {
      position: static;
    }
  }
}

/* ==========================================================
     Página "Quienes Somos" (nosotros.php)
     ========================================================== */
@layer nosotros {
  .nosotros {
    background-color: var(--bg-body);
    padding: clamp(3rem, 1.5rem + 4vw, 5.5rem) 0;
  }
  .nosotros + .nosotros {
    padding-top: 0;
  }

  /* --- Manifiesto (texto grande centrado, banda suave) --- */
  .nosotros-manifesto {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
    line-height: 1.8;
    color: var(--text-main);
    background-color: var(--primary-light);
    background-image: url("hexagons.svg");
    background-size: 28px 49px;
    border-radius: var(--radius-md);
    padding: clamp(2rem, 1rem + 3vw, 3.5rem);
    box-shadow: var(--shadow-soft);
  }
  .nosotros-manifesto p {
    margin: 0 0 1.5rem;
  }
  .nosotros-manifesto p:last-child {
    margin-bottom: 0;
  }

  /* --- Intro: texto + imagen --- */
  .nosotros-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
  }
  .nosotros-titulo {
    font-size: clamp(1.5rem, 1rem + 2vw, 2.1rem);
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.2;
    margin: 0 0 1.25rem;
  }
  .nosotros-texto p {
    color: var(--text-main);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
  }
  .nosotros-figura {
    margin: 0;
  }
  .nosotros-figura img,
  .nosotros-pilar-figura img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
  }

  /* --- Pilares (1 columna, tratamientos visuales distintos) --- */
  .nosotros-pilares {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .nosotros-pilar {
    background-color: var(--bg-white);
    border-radius: var(--radius-md);
    padding: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
  }
  .nosotros-pilar--media {
    display: grid;
    grid-template-columns: minmax(0, 340px) 1fr;
    align-items: center;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  }
  .nosotros-pilar--media .nosotros-pilar-figura {
    margin: 0;
  }
  .nosotros-pilar--media img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .nosotros-pilar-media-contenido {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .nosotros-pilar-media-contenido p {
    color: var(--text-main);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
  }
  .nosotros-pilar--texto {
    background-color: var(--primary-light);
    background-image: url("hexagons.svg");
    background-size: 28px 49px;
    box-shadow: none;
  }
  .nosotros-pilar--texto .nosotros-titulo-pilar {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  }
  .nosotros-titulo-pilar {
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.25;
  }
  .nosotros-pilar-contenido p {
    color: var(--text-main);
    line-height: 1.7;
    font-size: 1.05rem;
    margin: 0 0 1rem;
  }
  .nosotros-pilar-contenido p:last-child {
    margin-bottom: 0;
  }

  /* --- Apilado en mobile --- */
  @media (max-width: 900px) {
    .nosotros-grid {
      grid-template-columns: 1fr;
    }
    .nosotros-grid .nosotros-texto {
      order: -1;
    }
    .nosotros-pilar--media {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }
    .nosotros-pilar--media .nosotros-pilar-figura {
      justify-self: center;
    }
    .nosotros-pilar--media img {
      max-width: 300px;
      margin: 0 auto;
    }
  }
}

/* Móvil: scroll lateral en secciones productosx4 (ver todas las instancias) */
@media (max-width: 768px) {
  .productosx4 .grid-products {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap, 1.2rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .productosx4 .grid-products::-webkit-scrollbar {
    display: none;
  }

  .productosx4 .grid-products .product-card-1 {
    flex: 0 0 58%;
    min-width: 0;
    scroll-snap-align: center;
  }
}