/* ==========================================================================
   Base tipográfica y de color de la maqueta (RegaloOriginal-v68/styles.css)
   aplicada a TODA la tienda. Archivo NUEVO, cargado por _Layout y _LayoutIndex
   DESPUÉS de las hojas heredadas (min-styles.css, layout-index.css...), que no
   se tocan: aquí solo se sobrescribe lo necesario.

   - Fuente: DM Sans (400/500/600/700) en vez de Roboto / Roboto Condensed.
   - Cuerpo: 16px / 1.5, texto #222326, fondo blanco (antes Roboto 14px, #666
     sobre #f2f2f2).
   - Títulos: escala de la maqueta (h2 de sección clamp(29px,3vw,40px), h3 de
     bloque clamp(21px,2vw,27px)...), peso 700, tracking negativo.
   - Los iconos (Flaticon / icomoon / Font Awesome) NO se tocan: llevan su
     propia fuente en su clase.
   ========================================================================== */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dm-sans-400.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/dm-sans-500.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/dm-sans-600.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/dm-sans-700.ttf") format("truetype"); }

:root {
  --ro-font: "DM Sans", Arial, sans-serif;
  --ro-ink: #222326;
  --ro-muted: #686a70;
  --ro-line: #e9e7e5;
  --ro-soft: #f7f4f1;
  --ro-rose-soft: #f9eeee;
  --ro-brand: #d9263b;
  --ro-brand-dark: #b71c2e;
  --ro-sun: #f3b51b;
}

body {
  font-family: var(--ro-font);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ro-ink);
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ro-font);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ro-ink);
  overflow-wrap: break-word;
}
h1, .h1 { font-size: clamp(34px, 4.2vw, 52px); letter-spacing: -.045em; line-height: 1.08; }
h2, .h2 { font-size: clamp(29px, 3vw, 40px); letter-spacing: -.035em; line-height: 1.12; }
h3, .h3 { font-size: clamp(21px, 2vw, 27px); letter-spacing: -.03em; line-height: 1.25; }
h4, .h4 { font-size: 20px; letter-spacing: -.02em; }
h5, .h5 { font-size: 18px; letter-spacing: -.01em; }
h6, .h6 { font-size: 16px; }

p { overflow-wrap: break-word; }
strong, b, th { font-weight: 700; }
small, .small { font-size: 87.5%; }
input, button, select, textarea, optgroup { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #838186; }

/* Paginación: con 11 elementos a 16px no cabe en una línea en móvil (ya
   desbordaba con 14px). Que salte de línea. */
@media (max-width: 575px) {
  .pagination { flex-wrap: wrap; justify-content: center; }
  /* Tablas anchas de contenido (FAQ, envíos...): ya desbordaban la página en
     móvil; se desplazan dentro de su propia caja en vez de ensanchar todo. */
  main table.table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Estilos en línea con Roboto (style="font-family: Roboto ...") de vistas de
   carrito y pago. */
[style*="Roboto"] { font-family: var(--ro-font) !important; }

/* ==========================================================================
   Sustituciones de Roboto / Roboto Condensed de las hojas heredadas
   (generado desde ro-megamenu.css, ro.css, estilos.css, swiper-custom.css y
   layout-index.css; mismo selector y mismo @media que el original, y con
   !important solo donde el original lo tenía).
   ========================================================================== */
/* fuera de @media (ro-megamenu.css, ro.css, estilos.css, swiper-custom.css, layout-index.css) */
.ro-megamenu { font-family: var(--ro-font); }
.ro-megamenu .megamenu-header .megamenu-breadcrumb { font-family: var(--ro-font); }
.tag-new-megamenu { font-family: var(--ro-font); }
.counter-num { font-family: var(--ro-font); }
.bg-dark { font-family: var(--ro-font); }
.tag-new { font-family: var(--ro-font); }
.prod-info { font-family: var(--ro-font); }
.adicional-info { font-family: var(--ro-font); }
.wp-share .text-share { font-family: var(--ro-font); }
.wd-info-adicionales { font-family: var(--ro-font); }
.form-tupedido { font-family: var(--ro-font); }
.stepwizard-step p { font-family: var(--ro-font); }
.message-warning { font-family: var(--ro-font); }
.message-ok-tupedido { font-family: var(--ro-font); }
.adicional-bg-info { font-family: var(--ro-font); }
.megamenu-slidebars { font-family: var(--ro-font); }
#mp-pusher, .mp-back, .mp-menu, .mp-menu.mp-cover h2 { font-family: var(--ro-font); }
.DataGridItem { font-family: var(--ro-font); }
.DataGridAlternatingItem { font-family: var(--ro-font); }
.irPedido { font-family: var(--ro-font); }
h3 { font-family: var(--ro-font); }
.swiper-button-next::after, .swiper-button-prev::after { font-family: var(--ro-font) !important; }

/* @media (min-width: 576px) (ro.css) */
@media (min-width: 576px) {
  .tag-new { font-family: var(--ro-font); }
}

/* @media (min-width: 992px) (ro.css) */
@media (min-width: 992px) {
  .dropdown-menu { font-family: var(--ro-font); }
}

/* Fila de colores del componente "Productos" bajo el título: solo se ve en las rejillas .mug-grid
   (ro-catalogo-productos.css); en el resto de usos los colores siguen sobre la foto. */
.prod-colors-out { display: none; }

/* Móvil: los carruseles de producto de la home (destacados de la semana y regalos para cumpleaños) ocupan todo el ancho
   de la pantalla menos 2px (1px a cada lado). Se salen del margen del contenedor con el truco de ancho de ventana. */
@media (max-width: 767px) {
  body.ro-home .swiper-destacados-home,
  body.ro-home .swiper-especiales-home {
    width: calc(100vw - 2px);
    max-width: none;
    margin-left: calc(50% - 50vw + 1px);
    margin-right: 0;
  }
}

/* Móvil: el resto de bloques con caja de la home (cuadrícula de categorías, directorio «todas las categorías», desayunos,
   regalos por persona y ocasión, ventajas y las dos filas de la historia de marca) dejan 10px a cada lado, como el listado
   de productos de una categoría. Los títulos y textos sueltos conservan su margen. */
@media (max-width: 767px) {
  body.ro-home #todas-categorias,
  body.ro-home .desayuno-feature,
  body.ro-home .ocasion-panel,
  body.ro-home .ventajas-grid,
  body.ro-home .brand-story-row,
  body.ro-home .categorias-grid {
    width: calc(100vw - 20px);
    max-width: none;
    margin-left: calc(50% - 50vw + 10px);
    margin-right: 0;
  }
}

/* Icono de compra rápida de las tarjetas de producto (antes un ojo): carrito en SVG de línea dentro del mismo
   .icon-action que usaba el ojo (así conserva el tamaño y el centrado del CSS heredado), hereda el color del botón. */
.wp-actions-product .icon-cart-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp-actions-product .icon-cart {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Miga de pan (componente HiloNavegacion: listados, etiquetas, fechas señaladas y ficha). Más discreta: letra de 13px,
   línea más baja y menos hueco entre la cabecera y la miga (la sección .list-product deja 20px de relleno arriba). */
ol.breadcrumb {
  margin-top: -10px;
  padding-bottom: 4px;
  font-size: 13px;
  line-height: 18px;
}
ol.breadcrumb .breadcrumb-item,
ol.breadcrumb .breadcrumb-item a {
  font-size: 13px;
  line-height: 18px;
}
ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  padding-right: .35rem;
  padding-left: .35rem;
}

/* Home: iconos de acción (compra rápida + favorito) sobre la foto de los carruseles de destacados y especiales. El CSS heredado
   (ro.css) oculta el botón de compra rápida (.nm-eye) por debajo de 992px y pinta los iconos en un gris muy claro (#d1d1d1) que
   sobre la foto apenas se ve. Se muestra siempre (como en los listados de productos) y se usa el gris del listado (#8a8484).
   El corazón de un favorito sigue en rojo: ese color lo pone el JS en línea y gana a esta regla. */
@media (max-width: 991px) {
  body.ro-home #swiper-destacados .wp-actions-product a.nm-eye,
  body.ro-home #swiper-especiales .wp-actions-product a.nm-eye {
    display: block;
  }
  body.ro-home #swiper-destacados .wp-actions-product .icon-action,
  body.ro-home #swiper-especiales .wp-actions-product .icon-action {
    color: #8a8484;
  }
}

/* Home, móvil: títulos de los carruseles de productos («Destacados de la semana», «Regalos para Cumpleaños»).
   - Alineados con «¿Qué quieres personalizar?» (a 16px del borde): el h3 heredado llevaba 10px de relleno lateral que los dejaba
     a 26px.
   - «Ver todos» pasa a la línea siguiente, debajo del título y alineado a la izquierda (como «Ver todas las categorías»), en vez de
     compartir fila con el título y obligarlo a encoger o cortarse. */
@media (max-width: 767px) {
  body.ro-home h3.destacados-heading,
  body.ro-home .especiales-container .title-ellipsis {
    padding-left: 0;
    padding-right: 0;
  }
  body.ro-home .especiales-container > .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
  }
  body.ro-home .especiales-container .title-ellipsis {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
  }
  body.ro-home .especiales-container .ver-todos-link {
    margin-top: 12px;
    margin-bottom: 16px;
    transform: none;
  }
}

/* Home, móvil: los títulos de sección empiezan todos a 16px del borde, como «¿Qué quieres personalizar?».
   Los que van dentro de una caja (desayunos, regalos por persona y ocasión, ventajas) comparten línea con el resto del contenido
   de la caja (etiqueta, texto, botón), así que lo que se ajusta es el relleno lateral de la caja: 1px de borde exterior (la caja
   de desayunos no lleva borde propio: 15px) + 1px del borde de la caja (ocasión y ventajas: 14px) = 16px.
   «Opiniones de nuestros clientes» no va en caja: se le suma el relleno que le falta. */
@media (max-width: 767px) {
  /* En formato apilado .desayuno-copy no es una caja (display: contents): el relleno va en sus dos partes. */
  body.ro-home .desayuno-head,
  body.ro-home .desayuno-body {
    padding-left: 15px;
    padding-right: 15px;
  }
  body.ro-home .ocasion-panel,
  body.ro-home .ventaja-card {
    padding-left: 14px;
    padding-right: 14px;
  }
  body.ro-home section.list-reviews h3 {
    padding-left: 16px;
  }
}

/* Home, móvil: historia de marca alineada a 16px del borde como el resto de títulos.
   - El título grande y su párrafo estaban centrados (el texto empezaba a ~54px): se alinean a la izquierda.
   - Los dos bloques con título (foto + texto) llevan 22px de relleno interior sin borde propio: 15px + 1px de borde exterior = 16px. */
@media (max-width: 767px) {
  body.ro-home .brand-story-heading,
  body.ro-home .brand-story-heading h2,
  body.ro-home .brand-story-heading p {
    text-align: left;
  }
  body.ro-home .brand-story-copy {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Home: flechas de los carruseles (destacados, especiales y opiniones). swiper-custom.css / layout-index.css (heredados) las dejan en
   60x60px con !important y con el glifo "›" en Roboto de 60px. Aquí, como en los carruseles de la ficha de producto: círculo de
   40px (mismo centro vertical: margin-top = -10px - 20px), chevron dibujado con una máscara SVG centrado en el círculo y fondo
   traslúcido que solo se vuelve sólido (el verde de siempre, de layout-index.css) al pasar el ratón por encima. Siguen apareciendo
   al pasar el ratón por la sección (eso lo gestiona layout-index.css). */
body.ro-home .swiper-button-next-destacados,
body.ro-home .swiper-button-next-especiales,
body.ro-home .swiper-button-next-featured,
body.ro-home .swiper-button-prev-destacados,
body.ro-home .swiper-button-prev-especiales,
body.ro-home .swiper-button-prev-featured {
  width: 40px !important;
  height: 40px !important;
  margin-top: -30px !important;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(34, 35, 38, .14);
}
body.ro-home .swiper-button-next-destacados:not(:hover),
body.ro-home .swiper-button-next-especiales:not(:hover),
body.ro-home .swiper-button-next-featured:not(:hover),
body.ro-home .swiper-button-prev-destacados:not(:hover),
body.ro-home .swiper-button-prev-especiales:not(:hover),
body.ro-home .swiper-button-prev-featured:not(:hover) {
  background: rgba(255, 255, 255, .5);
}
body.ro-home .swiper-button-next-destacados::after,
body.ro-home .swiper-button-next-especiales::after,
body.ro-home .swiper-button-next-featured::after,
body.ro-home .swiper-button-prev-destacados::after,
body.ro-home .swiper-button-prev-especiales::after,
body.ro-home .swiper-button-prev-featured::after {
  content: "" !important;
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  padding: 0;
  font-size: 0 !important;
  line-height: 0;
  color: transparent !important;
  background-color: #1c927a;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
body.ro-home .swiper-button-next-destacados::after,
body.ro-home .swiper-button-next-especiales::after,
body.ro-home .swiper-button-next-featured::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5l7 7-7 7'/%3E%3C/svg%3E");
}
body.ro-home .swiper-button-prev-destacados::after,
body.ro-home .swiper-button-prev-especiales::after,
body.ro-home .swiper-button-prev-featured::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 5l-7 7 7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 5l-7 7 7 7'/%3E%3C/svg%3E");
}
body.ro-home .swiper-button-next-destacados:hover::after,
body.ro-home .swiper-button-next-especiales:hover::after,
body.ro-home .swiper-button-next-featured:hover::after,
body.ro-home .swiper-button-prev-destacados:hover::after,
body.ro-home .swiper-button-prev-especiales:hover::after,
body.ro-home .swiper-button-prev-featured:hover::after {
  background-color: #fff;
}
/* Tablet (y escritorio estrecho): el contenedor de los carruseles lleva 16px de relleno y las flechas se posicionan respecto al
   contenedor, no al slider; sin esto sobresalían 6px por los laterales del slider. */
@media (max-width: 1060px) {
  body.ro-home .swiper-button-prev-destacados,
  body.ro-home .swiper-button-prev-especiales {
    left: 26px;
  }
  body.ro-home .swiper-button-next-destacados,
  body.ro-home .swiper-button-next-especiales {
    right: 26px;
  }
}
/* Carrusel de opiniones: las flechas se posicionan respecto al contenedor y el iframe de opiniones lleva 15px de margen a cada
   lado, así que con el desplazamiento por defecto (10px) sobresalían 5px del iframe; con 25px quedan 10px dentro. */
body.ro-home .swiper-button-prev-featured {
  left: 25px;
}
body.ro-home .swiper-button-next-featured {
  right: 25px;
}

/* Home, móvil y tablet (formato apilado, hasta 1060px): la historia de marca va toda alineada a la izquierda. El título con su
   párrafo y el cierre («Si has llegado hasta aquí, te recomendamos…» + botón «Ver todas las secciones») estaban centrados, mientras
   los dos bloques con foto iban a la izquierda. En escritorio se mantienen centrados. */
@media (max-width: 1060px) {
  body.ro-home .brand-story-heading,
  body.ro-home .brand-story-heading h2,
  body.ro-home .brand-story-heading p,
  body.ro-home .brand-story-closing,
  body.ro-home .brand-story-closing p {
    text-align: left;
  }
}