/** Shopify CDN: Minification failed

Line 1961:0 Unexpected "<"
Line 2028:0 Unexpected "<"

**/
/* ====================================================================
   1. GENERAL / UTILIDADES
   ==================================================================== */

.hidden {
  display: none !important;
}

.custom-visually-hidden {
  opacity: 0;
}

.custom-full-w-container {
  max-width: 1440px;
  padding-left: 0px;
  padding-right: 0px;
}

store-header header {
  max-width: 100% !important;
}

@media (max-width: 767px) {
  store-header header {
    padding: 12px;
  }
}


/* ====================================================================
   2. CABECERA — buscador, carrito, anuncio
   ==================================================================== */

predictive-search {
  display: flex !important;
  justify-content: center;
}

.search__input {
  max-width: 374px;
  border-radius: 6px;
  background-color: #F4F4F4;
  height: 38px;
}

.header__cart-count {
  background-color: #000000;
}

.custom-announcement-content,
.custom-announcement-title {
  font-family: 'Work Sans';
  display: block;
}

.custom-announcement-content {
  font-size: 13px;
  line-height: 15.25px;
  font-weight: 500;
}

.custom-announcement-title {
  position: absolute;
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .custom-announcement-content {
    display: none;
  }

  .custom-announcement-title {
    font-size: 13px;
    line-height: 15.25px;
    font-weight: 600;
    position: initial;
    transform: none;
  }

  predictive-search form {
    width: 100%;
  }
}


/* ====================================================================
   3. FAVORITOS Y WISHLIST
   ==================================================================== */

add-favorite {
  cursor: pointer;
  width: 9%;
}

add-favorite::before {
  content: '';
  display: block;
  width: 175%;
  height: 150%;
  position: absolute;
  top: -25%;
  left: -40%;
}

add-favorite svg.icon--heart {
  cursor: pointer;
  width: 100%;
  height: auto;
}

.heart-fill {
  display: none;
  fill: rgb(210, 57, 57);
}

.heart-filled .heart-fill {
  display: unset;
}

li.variable-products,
li.slider__item {
  position: relative;
}

.wishlist-engine {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 5;
}

body.product .product-info__title .wishlist-engine {
  top: -4px;
}

.wishlist-engine .wishlist-engine-button {
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.7) !important;
  padding: 5px !important;
}

.wishlist-cart {
  background-color: #000000 !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  padding: var(--btn-padding-y, 12px) 26px !important;
  text-transform: math-auto !important;
}

@media (max-width: 767px) {
  add-favorite svg.icon--heart {
    width: 15.9px;
    height: 14.3px;
  }
}


/* ====================================================================
   4. POLÍTICAS Y POP-UPS
   ==================================================================== */

.custom-policy-container {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6.5px;
  justify-content: flex-start;
}

.custom-policy-container input {
  width: 14px;
  height: 14px;
  margin: 0px;
}

.custom-policy-container p {
  margin: 0px;
  font-size: 12px;
}

.custom-policy-container p a {
  text-decoration: underline;
}

pop-up .custom-policy-container {
  justify-content: center;
}

pop-up .custom_external_btn {
  margin-top: 16px;
}

@media (max-width: 767px) {
  .custom-policy-container {
    justify-content: center;
  }

  pop-up .custom_external_btn {
    margin-top: 14px;
  }
}


/* ====================================================================
   5. VALORACIONES Y CONTADOR
   ==================================================================== */

.trusted-stars-service-widget .wrapper .content .grade-count {
  display: block;
}

.countdown {
  font-family: 'Roboto-Black', arial;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  color: #E53737;
  background-color: #F4F4F4;
  padding: 0px 3px;
  border-radius: 4px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
}

@media (max-width: 1164px) {
  .countdown { font-size: 13px; }
}

@media (max-width: 1070px) {
  .countdown { font-size: 12px; }
}

@media (max-width: 850px) {
  .countdown { font-size: 1.1rem; }
}

@media (max-width: 768px) {
  .countdown {
    position: relative;
    display: flex;
    margin-top: -2rem !important;
    width: 70%;
    text-align: left;
    margin-left: 1.8rem;
    justify-content: start;
    box-shadow: 0 2px 2px #0000000a;
    font-size: 1rem;
  }
}

@media (max-width: 740px) {
  .countdown {
    font-size: .8rem;
    margin-top: -1rem;
    width: 80%;
  }
}

@media (max-width: 644px) {
  .countdown {
    font-size: .9rem;
    margin-top: -1rem;
    width: 80%;
  }
}

/* CORREGIDO: antes decía "max-widht" y nunca se aplicaba */
@media (max-width: 346px) {
  .countdown {
    font-size: 0.5rem;
  }
}


/* ====================================================================
   6. HOME — Mosaico "Para cada rincón" (Collection list)
   Selector por clase, independiente del ID de sección.
   ==================================================================== */

/* Escritorio: grid asimétrico (1 grande + 4 pequeñas) */
@media (min-width: 1024px) {
  .cc-collection-list ul.grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr !important;
    gap: 12px !important;
  }
  .cc-collection-list ul.grid > li:first-child {
    grid-row: span 2;
  }
  .cc-collection-list ul.grid > li,
  .cc-collection-list ul.grid > li .card,
  .cc-collection-list ul.grid > li .card__media,
  .cc-collection-list ul.grid > li .card__media a,
  .cc-collection-list ul.grid > li .card__media img {
    height: 100% !important;
  }
  .cc-collection-list ul.grid > li .card__media img {
    object-fit: cover;
    width: 100%;
  }
}

/* Texto sobre imagen (todos los tamaños) */
.cc-collection-list .card__collection {
  position: relative;
  overflow: hidden;
}
.cc-collection-list .card__collection .card__media {
  height: 100%;
}
.cc-collection-list .card__collection .card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.cc-collection-list .card__collection .card__info {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 24px;
  z-index: 2;
  text-align: left !important;
  pointer-events: none;
}
.cc-collection-list .card__collection .card__info .custom-collection-title,
.cc-collection-list .card__collection .card__info .card-link {
  color: #FFFFFF !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.cc-collection-list .card__collection .card__info .custom-collection-links {
  color: #FFFFFF !important;
  pointer-events: auto;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.cc-collection-list .card__collection .card__info .custom-collection-links svg {
  stroke: #FFFFFF !important;
}

/* Móvil: layout 2-1-2 */
@media (max-width: 767px) {
  .cc-collection-list h2 {
    font-size: 22px !important;
  }
  .cc-collection-list ul.grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  .cc-collection-list ul.grid > li {
    aspect-ratio: 1 / 1;
  }
  .cc-collection-list ul.grid > li:first-child {
    grid-column: 1 / span 2;
    grid-row: 2;
    aspect-ratio: 16 / 9;
  }
  .cc-collection-list ul.grid > li:nth-child(4),
  .cc-collection-list ul.grid > li:nth-child(5) {
    grid-row: 3;
  }
  .cc-collection-list ul.grid > li .card,
  .cc-collection-list ul.grid > li .card__media,
  .cc-collection-list ul.grid > li .card__media a,
  .cc-collection-list ul.grid > li .card__media img {
    height: 100% !important;
  }
  .cc-collection-list ul.grid > li .card__media img {
    object-fit: cover;
    width: 100%;
  }
  .cc-collection-list .card__collection .card__info {
    bottom: 12px;
    left: 14px;
    right: 14px;
  }
  .cc-collection-list .card__collection .custom-collection-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }
  .cc-collection-list .card__collection .custom-collection-links {
    font-size: 11px !important;
  }
  .cc-collection-list ul.grid > li:first-child .custom-collection-title {
    font-size: 16px !important;
  }
}


/* ====================================================================
   7. HOME — Trust bar (marquesina infinita)
   CAMBIADO: antes usaba el ID de sección antiguo (22728172536043),
   que ya no existe tras publicar el theme nuevo. Ahora va por clase.
   ==================================================================== */

.blenom-hidden-section {
  display: none !important;
}

/* Ocultar flechas de navegación */
.cc-icons-with-text .slider-nav,
.cc-icons-with-text .slider-nav__btn,
.cc-icons-with-text .tap-target,
.cc-icons-with-text button[name="prev"],
.cc-icons-with-text button[name="next"],
.cc-icons-with-text .slide-nav,
.cc-icons-with-text .slide-nav--inline {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ocultar items duplicados (5-8) en escritorio */
@media (min-width: 768px) {
  .cc-icons-with-text .slider__item:nth-child(n+5) {
    display: none !important;
  }
}

/* Compacta + marquesina continua en móvil */
@media (max-width: 767px) {
  .cc-icons-with-text .section--padded-small {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .cc-icons-with-text {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .cc-icons-with-text > div,
  .cc-icons-with-text .container {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .cc-icons-with-text svg,
  .cc-icons-with-text img.icon,
  .cc-icons-with-text .slider__item img {
    width: 20px !important;
    height: 20px !important;
  }

  .cc-icons-with-text h2,
  .cc-icons-with-text h3,
  .cc-icons-with-text .h6 {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: inline !important;
    white-space: nowrap !important;
  }

  .cc-icons-with-text p {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 0 0 0 6px !important;
    display: inline !important;
    opacity: 0.85;
    white-space: nowrap !important;
  }

  .cc-icons-with-text .slider {
    overflow: hidden !important;
    scroll-snap-type: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .cc-icons-with-text .slider__grid {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-columns: unset !important;
    grid-auto-flow: unset !important;
    width: max-content !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    animation: blenom-trustbar-marquee 30s linear infinite;
  }

  .cc-icons-with-text .slider__item {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 32px !important;
    white-space: nowrap !important;
  }

  .cc-icons-with-text .slider__grid:hover {
    animation-play-state: paused;
  }

  /* El body no debe scrollear horizontalmente en móvil */
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

@keyframes blenom-trustbar-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .cc-icons-with-text .slider__grid {
    animation: none !important;
  }
}


/* ====================================================================
   8. HOME — Sección ecofriendly (Logo list), 3 columnas en móvil
   CAMBIADO: antes usaba el ID de sección antiguo. Ahora va por clase.
   ==================================================================== */

@media (max-width: 767px) {
  .cc-logo-list .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .cc-logo-list .logo-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cc-logo-list .logo-list li {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .cc-logo-list .logo-list img {
    max-width: 100% !important;
    height: auto !important;
  }
}


/* ====================================================================
   9. TARJETA DE PRODUCTO (colecciones, sliders)
   ==================================================================== */

.card.card--product {
  height: auto;
}

/* Ocultar línea de producto */
.card.card--product .card__linea {
  display: none !important;
}

/* Ocultar el "+ colores" (los swatches ya lo comunican) */
.card.card--product .product-card__colors {
  display: none !important;
}

/* Título */
.card.card--product .card__title,
.card.card--product .card__title a {
  font-family: 'Arimo', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* Subtítulo (máx. 2 líneas) */
.card.card--product .card__custom-subtitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  font-size: 13px;
  color: #A68967 !important;
  margin-top: 4px;
  margin-bottom: 0;
  font-weight: 400;
}

/* Precio */
.card.card--product .price .price__from {
  font-size: 12px !important;
  color: #999 !important;
  font-weight: 400 !important;
}
.card.card--product .price .price__was {
  font-size: 13px !important;
  color: #999 !important;
  font-weight: 400 !important;
}
.card.card--product .price .price__current,
.card.card--product .price .custom-price__current {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
}

/* Swatches de color en la tarjeta */
.card.card--product .card__swatches {
  gap: 5px !important;
}
.card.card--product .card__swatches .swatch,
.card.card--product .card__swatches label {
  width: 20px !important;
  height: 20px !important;
}

/* Ocultar la segunda fila de swatches (color de patas).
   CAMBIADO: antes usaba :has(), que no aplicaba en este entorno. */
.card.card--product .card__swatches ~ .card__swatches {
  display: none !important;
}

/* Sin hueco en blanco cuando el producto no tiene colores:
   el bloque de info no se estira a la altura de la tarjeta */
.card.card--product .card__info-container {
  flex: 0 0 auto !important;
}
.card.card--product .card__info-inner {
  height: auto !important;
}

/* Badge "Ahorra X€" — píldora verde marca */
.card.card--product .product-label--sale,
.product-label--sale {
  background-color: #253327 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  border: none !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.card.card--product .product-label-wrapper {
  top: 10px !important;
  left: 10px !important;
}
.card.card--product .product-label--sale svg,
.product-label--sale svg {
  display: none !important;
}

/* Precios en tarjetas de colección */
product-card .price--compare-at-sale .price__current {
  font-size: 17px;
  font-weight: 600;
}
product-card :not(.price--compare-at-sale) .price__was {
  font-size: .8em;
  font-weight: normal;
}

/* ====================================================================
   10. FICHA DE PRODUCTO
   ==================================================================== */

/* --- Precio --- */
.price--compare-at-sale .price__was {
  font-size: 17px;
}
.price--compare-at-sale .custom-price__current {
  font-size: .8em;
}

.product-info__price .price--on-sale .price__current,
.product-info__price .price__current.custom-price__current {
  color: #1a1a1a;
}

/* Jerarquía de precio */
.product-info__price .price__default {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.product-info__price .price__current.custom-price__current {
  order: 1;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}
.product-info__price .price__was {
  order: 2;
  font-size: 14px;
  font-weight: 400;
  color: #999;
}

/* Badge de descuento */
.product-info__price.custom-product-info__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.custom-discount-badge {
  display: inline-block;
  background: #C0392B;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 9999px;
  line-height: 1;
  vertical-align: middle;
  margin-left: auto;
}

/* --- Título, subtítulo, referencia --- */
.custom-main-product-title {
  font-family: inherit;
  font-weight: 700;
  font-size: 22px !important;
  line-height: 1.3;
}
.custom-product-subtitle {
  color: #A68967;
  font-family: inherit;
  font-size: 14px;
  margin-top: 0.4rem;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.4;
}
#reference-number {
  font-size: 13px;
  color: #8a8a8a;
}

/* --- Botón "Añadir a la cesta" --- */
.product-info__add-button button.btn.btn--primary {
  background: #253327 !important;
  box-shadow: none !important;
  border-color: #253327 !important;
  color: #FFFFFF !important;
  font-size: 1.05rem !important;
  padding-top: 1.1rem !important;
  padding-bottom: 1.1rem !important;
  border-radius: 9999px !important;
  letter-spacing: 0.02em;
}
.product-info__add-button button.btn.btn--primary:disabled,
.product-info__add-button button.btn.btn--primary[disabled],
.product-info__add-button button.btn.btn--primary[aria-disabled="true"] {
  background: #c9c4ba !important;
  box-shadow: none !important;
  border-color: #c9c4ba !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  border-radius: 9999px !important;
}
.product-info__add-button,
.product-info__add-to-cart {
  background: transparent !important;
}

/* --- Caja "Hecho a mano · Recíbelo..." --- */
.product-delivery-time {
  background: #EFE4D6;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  align-items: center;
  width: fit-content;
}
.product-delivery-time .delivery-text.font-green {
  color: #253327 !important;
  font-weight: 700;
}

/* --- Caja de beneficios (garantía / devoluciones) --- */
.custom-benefits {
  border: 1px solid #E0D7C8;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.custom-benefits__item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #253327;
}

/* --- Selectores de opción (acotados a la ficha) --- */
.product-info .option-selector__btns {
  gap: 0.7rem;
}
.product-info .opt-label.tallas_texto.btn {
  border: 1px solid #d6cfc2 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.product-info .opt-btn:checked + .opt-label.tallas_texto {
  border: 1px solid #253327 !important;
  font-weight: 700;
}

/* Círculos de color (Acabado + Patas) */
.product-info .opt-label--swatch.swatch-shape--circle {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid #eae3d8 !important;
}
.product-info .opt-btn:checked + .opt-label--swatch.swatch-shape--circle {
  border-color: #C9B79C !important;
  box-shadow: 0 0 0 2px #C9B79C !important;
}

/* --- Acordeones de la columna (Medidas, Envío) --- */
.disclosure__title.product-info__disclosure {
  color: #253327 !important;
  font-family: 'Arimo', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.product-info__disclosure ~ .disclosure__toggle,
.product-info__sticky .disclosure__toggle {
  color: #253327 !important;
}

/* --- Sección "Sobre el producto" --- */
.custom-product-details-accordion__container {
  background: #FBF8F2;
  border-radius: 16px;
  padding: 2.5rem;
}
.custom-product-details-accordion__container,
.custom-product-details-accordion__container * {
  font-family: 'Arimo', sans-serif !important;
}
.custom-product-details-accordion__title {
  color: #253327;
}
.custom-product-description {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #3a3a3a;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.custom-product-description p {
  margin-bottom: 1rem;
}
.product-details-accordion-list .disclosure__title {
  font-weight: 700;
}
/* ====================================================================
   11. POPUP DE IMAGEN (galería ampliada)
   ==================================================================== */

.image-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px 0;
  box-sizing: border-box;
}

.image-popup__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.image-popup__content {
  position: relative;
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

.image-popup__image {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.image-popup__close {
  position: absolute;
  top: -45px;
  right: -5px;
  color: white;
  font-size: 36px;
  font-weight: 300;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease;
  background: none;
  border: none;
  outline: none;
}
.image-popup__close:hover {
  transform: scale(1.2);
}

.image-popup__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 10;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.image-popup__arrow:hover {
  opacity: 1;
}
.image-popup__arrow--left { left: 10px; }
.image-popup__arrow--right { right: 10px; }
.image-popup__arrow svg {
  width: 24px;
  height: 24px;
  fill: white;
}

/* Miniaturas */
.image-gallery {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 15px 10px;
  width: 100%;
  max-width: 90vw;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 20px;
  margin: 0 auto;
}

.gallery-thumbnail {
  width: 70px;
  height: 70px;
  min-width: 70px;
  scroll-snap-align: start;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
  background-color: #2a2a2a;
  position: relative;
}
.gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-thumbnail.active {
  border-color: #ffffff;
  transform: scale(1.05);
}
.gallery-thumbnail:hover:not(.active) {
  border-color: rgba(255, 255, 255, 0.5);
}
.gallery-thumbnail:hover img {
  transform: scale(1.1);
}

/* Scrollbar */
.image-gallery::-webkit-scrollbar {
  height: 6px;
}
.image-gallery::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.image-gallery::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
.image-gallery::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
  .image-popup__content { width: 95%; }
  .image-popup__image { max-height: 60vh; }
  .gallery-thumbnail {
    width: 60px;
    height: 60px;
    min-width: 60px;
  }
  .image-popup__close {
    top: -40px;
    right: 0;
  }
  .image-popup__arrow {
    width: 30px;
    height: 50px;
  }
}

@media (max-height: 700px) {
  .image-popup__image { max-height: 55vh; }
  .gallery-thumbnail {
    width: 55px;
    height: 55px;
    min-width: 55px;
  }
}
/* ============================================================
   MENÚ BLENOM — archivo completo
   ------------------------------------------------------------
   ============================================================ */

/* ============================================================
   A — ESCRITORIO
   ============================================================ */
@media (min-width: 769px) {

  /* A1 — El botón sube junto al logo */
  .main-menu {
    order: -1 !important;
    width: auto !important;
    background-color: transparent !important;
    padding-inline-start: var(--gutter);
  }

  .header__logo {
    padding-inline-start: calc(3 * var(--space-unit)) !important;
  }

  .main-menu__toggle {
    display: block !important;
    margin-inline-start: 0;
    margin-inline-end: 0;
    position: relative;
    z-index: 31;
  }

  /* Con el panel abierto, la X salta a la esquina superior izquierda.
     El -70px es la alineación vertical de la aspa: si tenías otro valor
     que te cuadraba, consérvalo. */
  .main-menu__disclosure.is-open .main-menu__toggle {
    position: fixed;
    top: calc(var(--header-end, 100px) - 70px);
    left: calc(5 * var(--space-unit) - 12px);
    transform: none;
  }

  .cc-header--sticky .main-menu__disclosure {
    max-height: none;
    overflow: visible;
  }

  /* A2 — El panel lateral.
     Los !important son necesarios porque hay CSS antiguo inyectado
     por el campo Custom CSS de la sección que pone top: 0. */
  .main-menu__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: fixed;
    z-index: 29;
    top: 118px !important;
    left: 0;
    width: 360px;
    max-width: 90vw;
    height: calc(var(--viewport-height, 100vh) - 118px) !important;
    padding: calc(4 * var(--space-unit)) calc(5 * var(--space-unit)) calc(10 * var(--space-unit));
    overflow-y: auto;
    background-color: rgb(var(--nav-child-bg-color));
    color: rgb(var(--nav-child-text-color));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    transform: translateX(-101%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s;
  }

  .main-menu__disclosure.is-open > .main-menu__content {
    transform: translateX(0);
    visibility: visible;
  }

  .main-menu__disclosure.is-closing > .main-menu__content {
    transform: translateX(-100.5%);
    visibility: hidden;
  }

  /* A3 — Categorías en columna */
  .main-menu .main-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100%;
    margin: 0 !important;
  }

  .main-menu .main-nav > li {
    border-bottom: 1px solid var(--nav-line-color);
  }

  .main-menu .main-nav__item--primary {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 1.4rem 0 !important;
    font-size: 15px;
  }

  .main-menu .main-nav__item--primary:hover,
  .main-menu .is-open > summary > .main-nav__item--primary {
    box-shadow: none !important;
  }

  .main-menu .main-nav__item--toggle,
  .main-menu .main-nav__item--toggle .main-nav__item-content {
    display: flex !important;
    width: 100% !important;
  }

  /* A4 — Subcategorías en acordeón */
  .main-menu__content .main-nav__child {
    position: static !important;
    z-index: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 0;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: max-height .3s ease !important;
  }

  .main-menu__content details.is-open > .main-nav__child {
    max-height: 600px;
  }

  .main-menu__content .main-nav__child--offset-right {
    right: auto !important;
  }

  .main-menu__content .child-nav--dropdown,
  .main-menu__content .main-nav__grandchild {
    max-width: none !important;
  }

  .main-menu__content .child-nav__item,
  .main-menu__content .main-nav__grandchild {
    padding-right: 0 !important;
    padding-left: calc(4 * var(--space-unit)) !important;
  }

  .main-menu__content .child-nav__item {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
    font-size: 14px;
  }

  /* A5 — Destacados arriba del todo, dentro del panel.
     Si prefieres que NO se repitan (solo en la cabecera), descomenta:
     .main-menu__content .secondary-nav-container { display: none; } */
  .main-menu__content .secondary-nav-container {
    order: -1;
    width: 100%;
  }

  .main-menu .secondary-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    margin: 0 0 calc(4 * var(--space-unit)) !important;
    padding: 0 0 calc(3 * var(--space-unit)) !important;
    border-bottom: 1px solid var(--nav-line-color);
  }

  .main-menu .secondary-nav__item {
    margin: 0 !important;
    padding: .8rem 0 !important;
    font-size: 15px;
  }

  .main-menu .secondary-nav__item:not(.secondary-nav__cta) {
    color: inherit !important;
  }

  .main-menu .secondary-nav__item:hover {
    box-shadow: none !important;
  }

  /* A6 — Acordeón con + / − en lugar de chevron */
  .main-menu__content .main-nav__item--toggle .icon {
    display: none !important;
  }

  .main-menu__content .main-nav > li > details > summary .main-nav__item--primary::after {
    content: "+";
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding-inline-start: 1rem;
    font-size: 17px;
    line-height: 1;
    opacity: .55;
  }

  .main-menu__content .main-nav > li > details.is-open > summary .main-nav__item--primary::after {
    content: "−";
  }

  /* A7 — "Ver todo" al final de cada acordeón.
     El enlace ya existe en el HTML (el theme solo lo ocultaba en escritorio)
     y lleva el nombre de la categoría dentro. Lo movemos al final con
     order:10 y sustituimos el texto: font-size:0 oculta el original y el
     ::before escribe "Ver todo".
     Ojo: ese texto está escrito aquí, así que no se traduce. */
  .main-menu__content .child-nav {
    display: flex !important;
    flex-direction: column !important;
  }

  .main-menu__content .child-nav > li:has(.main-nav__item-header) {
    display: block !important;
    order: 10;
  }

  .main-menu__content .main-nav__item-header {
    display: block !important;
    padding: .8rem 0 .8rem calc(4 * var(--space-unit)) !important;
    font-size: 0 !important;
    text-decoration: underline;
    text-underline-offset: .3rem;
  }

  .main-menu__content .main-nav__item-header::before {
    content: "Ver todo";
    font-size: 14px;
  }

  /* A8 — Redes sociales al pie del panel, centradas.
     Se dibujan desde header.liquid con {% render 'social-media' %}.
     El margin-top: auto las empuja al fondo aprovechando que el panel
     es flex en columna: si el contenido llena el panel, quedan detrás. */
  .main-menu__social {
    margin-top: auto;
    padding-top: calc(6 * var(--space-unit));
  }

  .main-menu__social .social {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
  }

  .main-menu__social .social__link {
    width: 34px;
    height: 34px;
    padding: 7px;
  }

  /* A9 — Buscador tipo píldora, junto al logo */
  .header__search {
    flex: 0 1 420px !important;
    margin-inline-end: auto;
  }

  .search__input {
    border-radius: 999px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(0, 0, 0, .04);
    font-size: 14px;
  }

  /* A10 — Con el menú abierto, el buscador baja al panel.
     Si la búsqueda predictiva se descoloca al escribir, borra este
     bloque entero y el buscador vuelve a la cabecera. */
  .header__grid:has(.main-menu__disclosure.is-open) .header__search {
    position: fixed !important;
    z-index: 30;
    top: 118px;
    left: 0;
    width: 360px;
    max-width: 90vw;
    flex: none !important;
    padding: 0 20px 20px !important;
    margin: 0 !important;
    background: rgb(var(--nav-child-bg-color));
  }

  .main-menu__disclosure.is-open > .main-menu__content {
    padding-top: 90px;
  }

  .cc-header:has(.main-menu__disclosure.is-open) .header {
    border-bottom-color: transparent;
  }

  /* A11 — Destacados en la cabecera.
     Se dibujan desde header.liquid recorriendo el mismo menú Destacados
     (section.settings.quicklinks_menu), así que se actualizan solos. */
  .header__quicklinks {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-inline-end: 22px;
  }

  .header__quicklink {
    color: currentColor;
    font-size: 14px;
    white-space: nowrap;
    transition: opacity .2s;
  }

  .header__quicklink:hover {
    opacity: .6;
  }

  /* A12 — Posición del selector de idioma en la cabecera.
     Se añade desde header.liquid con
     {% render 'localization-form-header', id: 'header-localization', hide_labels: true %} */
  .header__localization {
    display: flex !important;
    align-items: center;
    margin-inline-end: 12px;
  }

  .header__localization .localization__grid {
    display: flex;
    gap: 4px;
  }

  /* El selector de la barra de anuncios se oculta solo en escritorio.
     En móvil hay que dejarlo: el theme lo traslada al drawer con JS. */
  .cc-announcement .localization {
    display: none;
  }
  /* A13 — Sin líneas separadoras y más compacto.
     En escritorio se puede apretar más que en móvil: con ratón no hay
     mínimo de zona de toque, así que manda la legibilidad. */
  .main-menu__content .main-nav > li,
  .main-menu__content .child-nav > li,
  .main-menu__content .grandchild-nav > li {
    border-bottom: 0 !important;
  }

  .main-menu .secondary-nav {
    border-bottom: 0 !important;
    padding-bottom: calc(2 * var(--space-unit)) !important;
  }

  .main-menu .secondary-nav__item {
    padding: .5rem 0 !important;
  }

  .main-menu__content .main-nav__item--primary {
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
  }

  .main-menu__content .child-nav__item {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
  }

  .main-menu__content .main-nav__item-header {
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
  }
 /* A14 — Con el panel abierto, la cabecera se ancla.
     No se puede bloquear el scroll con overflow:hidden en html:
     eso rompería su position:sticky y la cabecera desaparecería.
     El 32px es la altura del cintillo, igual que en el bloque F. */
  .cc-header:has(.main-menu__disclosure.is-open) {
    position: fixed !important;
    top: 32px;
    left: 0;
    right: 0;
    z-index: 31;
  }
}


/* ============================================================
   B — ASPECTO DEL SELECTOR DE IDIOMA
   Va FUERA de cualquier @media y apunta por ID porque los estilos
   de formulario del theme ganaban a los selectores por clase.

   La etiqueta "Idioma:" se vació desde localization-form-header.liquid
   (assign language_label = '').

   El --custom-select-button-width: auto es imprescindible:
   custom-select.js calcula ese ancho a partir del texto de la etiqueta
   y, al estar vacía, inyecta un valor negativo (-20px) que se come el
   icono de la flecha.
   ============================================================ */
#header-localization .label {
  display: none !important;
}

#header-localization .custom-select__btn {
  --custom-select-button-width: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  width: auto !important;
  min-width: 0 !important;
  padding: 4px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  white-space: nowrap;
}

#header-localization .custom-select__btn > .icon {
  flex-shrink: 0;
  width: 12px !important;
  height: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: .7;
}


/* ============================================================
   C — MÓVIL
   ============================================================ */
@media (max-width: 768.98px) {

  /* C1 — Lo que solo existe en escritorio */
  .header__localization,
  .header__quicklinks {
    display: none;
  }

  /* C2 — El drawer pasa a columna para poder reordenar sus bloques */
  .main-menu__content {
    display: flex !important;
    flex-direction: column !important;
  }

  /* C3 — Destacados arriba del todo, con aire por encima y por debajo.
     Al no haber línea separadora, ese aire es lo único que distingue
     el bloque promocional del catálogo. */
  .main-menu__content .secondary-nav-container {
    order: -1;
    width: 100%;
    padding-top: calc(4 * var(--space-unit));
  }

  .main-menu .secondary-nav {
    margin: 0 0 calc(3 * var(--space-unit)) !important;
    padding: 0 16px calc(4 * var(--space-unit)) !important;
    border-bottom: 0 !important;
  }

  .main-menu .secondary-nav > li:not(:only-child) {
    margin-top: 0;
  }

  .main-menu .secondary-nav__item {
    display: block;
    padding: .65rem 0 !important;
    font-size: 16px !important;
  }

  /* C4 — País e idioma dejan de estar anclados al fondo.
     Venían con position:absolute y se montaban encima de los destacados. */
  .mob__localization {
    position: static !important;
    order: 8;
    margin-top: calc(4 * var(--space-unit));
  }

  .mob__localization form#nav-localization {
    padding: 0 16px !important;
  }

  /* Solo mostramos idioma. Ojo: al ocultar el país, un cliente de fuera
     de España no puede cambiar de mercado ni divisa en ningún sitio.
     Si algún día quieres recuperarlo, borra esta regla. */
  .mob__localization .localization__selector:first-child {
    display: none;
  }

  /* C5 — Selector de idioma discreto, sin caja.
     El --custom-select-button-width: auto es imprescindible:
     custom-select.js calcula el ancho del botón a partir del texto de la
     etiqueta y, al ocultarla, inyecta valores que descuadran el icono. */
  #nav-localization .custom-select__btn,
  #nav-localization .custom-localization-btn {
    --custom-select-button-width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: auto !important;
    height: auto !important;
    padding: 6px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  #nav-localization .label {
    display: none !important;
  }

  #nav-localization .text-start {
    font-size: 14px;
  }

  #nav-localization .custom-select__btn > .icon,
  #nav-localization .custom-localization-btn svg {
    flex-shrink: 0;
    width: 14px !important;
    height: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    transform: none !important;
    opacity: .6;
  }

  /* Desplegable compacto. El min-width:0 es necesario porque el theme
     le fuerza 165px mínimo y no le deja encoger. */
  #nav-localization .custom-select__listbox {
    min-width: 0 !important;
    width: auto !important;
    max-height: 240px;
    border-radius: 6px !important;
  }

  #nav-localization .custom-select__option {
    padding: 8px 14px !important;
    font-size: 14px;
  }

  /* C6 — Las redes, al final */
  .main-menu__social {
    order: 9;
    margin-top: calc(4 * var(--space-unit));
    padding: 0 16px calc(4 * var(--space-unit));
  }

  .main-menu__social .social {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
  }

  /* C7 — Acordeón en línea en lugar de paneles deslizantes.
     El theme los dibujaba como pantallas que entran desde la derecha
     (position:fixed + translate3d). Aquí los convertimos en desplegables. */
  .js .main-nav__child,
  .js .main-nav__child.is-closing {
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: 0;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    background: transparent !important;
    transition: max-height .3s ease !important;
  }

  .js .is-open:not(.is-closing) > .main-nav__child {
    max-height: 1200px;
    transform: none !important;
  }

  /* El botón "Atrás" ya no hace falta */
  .main-nav__item--back,
  .main-menu__content .child-nav > li:has(.main-nav__item--back) {
    display: none !important;
  }

  /* C8 — Indicador + / − en vez de flecha */
  .main-menu__content .main-nav__item--toggle .icon {
    display: none !important;
  }

  .main-menu__content .main-nav > li > details > summary .main-nav__item--primary::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    opacity: .55;
  }

  .main-menu__content .main-nav > li > details.is-open > summary .main-nav__item--primary::after {
    content: "−";
  }

  /* C9 — "Ver todo" al final del acordeón, igual que en escritorio.
     La Vila lo pone primero: si lo prefieres así, cambia order:10 por order:-1. */
  .main-menu__content .child-nav {
    display: flex !important;
    flex-direction: column !important;
  }

  .main-menu__content .child-nav > li:has(.main-nav__item-header) {
    display: block !important;
    order: 10;
  }

  .main-menu__content .main-nav__item-header {
    display: block !important;
    padding: .8rem 0 .8rem 32px !important;
    font-size: 0 !important;
    text-decoration: underline;
    text-underline-offset: .3rem;
  }

  .main-menu__content .main-nav__item-header::before {
    content: "Ver todo";
    font-size: 16px;
  }

  /* C10 — Sin líneas separadoras y compacto, estilo Hannun.
     Al quitar los filetes, lo único que separa los elementos es el aire,
     así que los paddings de aquí marcan el ritmo de la lista.

     Alturas de toque resultantes:
       categorías    ~46px   (por encima del mínimo recomendado de 44)
       destacados    ~38px
       subcategorías ~36px
     Las categorías son las que más se tocan: no bajaría de 1.1rem.
     Si quieres apretar más, toca line-height antes que el padding. */
  .main-menu__content .main-nav > li,
  .main-menu__content .child-nav > li,
  .main-menu__content .grandchild-nav > li {
    border-bottom: 0 !important;
  }

  .main-menu__content .main-nav__item--primary {
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
    font-size: 16px !important;
  }

  .main-menu__content .child-nav__item {
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
    padding-inline-start: 32px !important;
    font-size: 14.5px !important;
  }
}
/* ============================================================
   D — TIPOGRAFÍA, PESOS Y COLOR 
   ------------------------------------------------------------
   ============================================================ */

/* D1 — Familia tipográfica del menú. */
.main-menu,
.header__quicklinks,
.header__localization {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

/* D2 — Promocionales: solo estos llevan peso semibold.
   Es lo que hace que el bloque de arriba destaque sin gritar. */
.main-menu .secondary-nav__item,
.header__quicklink {
  font-weight: 400;
  color: #4A443C;
  letter-spacing: .005em;
}

.main-menu .secondary-nav__item[href*="/novedades"],
.header__quicklink[href*="/novedades"] {
  color: #9C5B36 !important;
  font-weight: 600;
}

.main-menu .secondary-nav__item[href*="/rebajas"],
.header__quicklink[href*="/rebajas"] {
  color: #A32E23 !important;
  font-weight: 600;
}

.main-menu .secondary-nav__item[href*="/mas-vendidos"],
.header__quicklink[href*="/mas-vendidos"] {
  color: #101110ff !important;
  font-weight: 600;
}

/* D3 — Categorías: un punto por debajo de los promocionales */
.main-menu__content .main-nav__item--primary {
  font-weight: 600;
  color: #1F1B16;
  letter-spacing: .005em;
}

/* D4 — Subcategorías: peso normal y un tono más claro */
.main-menu__content .child-nav__item,
.main-menu__content .grandchild-nav__item {
  font-weight: 400;
  color: #4A443C;
}

/* D5 — "Ver todo": el nivel más apagado */
.main-menu__content .main-nav__item-header::before {
  color: #8A8279;
}

/* D6 — El signo + / − no compite con el texto */
.main-menu__content .main-nav > li > details > summary .main-nav__item--primary::after {
  color: #8A8279;
  font-weight: 400;
}

/* D7 — Tamaños por pantalla.*/
@media (min-width: 769px) {
  .main-menu .secondary-nav__item { font-size: 15px !important; }
  .main-menu__content .main-nav__item--primary { font-size: 15px; }
  .main-menu__content .child-nav__item { font-size: 13.5px !important; }
  .main-menu__content .main-nav__item-header { font-size: 0 !important; }
  .main-menu__content .main-nav__item-header::before { font-size: 13px; }
  .header__quicklink { font-size: 14px; }
}

@media (max-width: 768.98px) {
  .main-menu .secondary-nav__item { font-size: 17px !important; }
  .main-menu__content .main-nav__item--primary { font-size: 17px !important; }
  .main-menu__content .child-nav__item { font-size: 15px !important; }
  .main-menu__content .main-nav__item-header { font-size: 0 !important; }
  .main-menu__content .main-nav__item-header::before { font-size: 14px; }
}
/* ============================================================
   E — BARRA DE ANUNCIOS
   ============================================================ */
.announcement .custom-announcement-title {
  padding: 4px 0;
}

.announcement__text {
  min-height: 32px;
}
/* ============================================================
   F — CINTILLO Y CABECERA FIJOS
   ------------------------------------------------------------
    ============================================================ */

.cc-announcement {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 32;
}

.cc-header--sticky {
  top: 32px !important;
}

.announcement .custom-announcement-title {
  padding: 4px 0;
}


/* ---------- Escritorio ---------- */
/* El theme aplica .announcement__col--align-left porque los
   selectores de país e idioma están activos (son los que alimentan
   el selector del menú móvil, así que no se pueden desactivar).
   Como en escritorio ocultamos esa columna, hay que recentrar. */
@media (min-width: 769px) {
  body {
    padding-top: 32px;
  }

  .cc-announcement .announcement__col--right {
    display: none !important;
  }

  .cc-announcement .announcement__col--left,
  .cc-announcement .announcement__col--align-left {
    flex: 1 1 100% !important;
    justify-content: center !important;
    text-align: center;
  }

  .cc-announcement .announcement__text {
    justify-content: center !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}


/* ---------- Móvil ---------- */
@media (max-width: 768.98px) {

  /* El título viene con class="... absolute" desde el Liquid, así que
     se coloca respecto al ancestro posicionado más cercano. Al pasar
     el cintillo a fixed cambia esa referencia y el texto se sale de
     la vista. Devolviéndolo al flujo vuelve a verse. */
  .announcement .custom-announcement-title {
    position: static !important;
    width: 100%;
    text-align: center;
  }

  /* Cabecera fija debajo del cintillo */
  .cc-header--sticky {
    position: fixed !important;
    top: 32px;
    left: 0;
    right: 0;
    z-index: 31;
  }

  body {
    padding-top: calc(32px + var(--header-height, 92px));
  }
  
}
/* ============================================================
   G — PIE DE PÁGINA
   ------------------------------------------------------------
      ============================================================ */

@media (min-width: 769px) {

  .footer .footer__main {
    justify-content: flex-start !important;
    align-items: flex-start;
    gap: calc(10 * var(--space-unit));
  }

  .footer .footer-col--text {
    flex: 0 0 26%;
  }

  .footer .footer-col--links {
    flex: 1 1 0;
  }

  /* El bloque del logo trae la clase text-center desde el HTML,
     por eso no bastaba con alinear el contenedor. */
  .footer .footer-col--text .footer-block.text-center {
    text-align: start !important;
  }

  /* La imagen es de 600×400: ocupa demasiado alto y empuja teléfono,
     correo y redes hacia abajo. Este es el número a tocar si quieres
     el logo más grande o más pequeño. */
  .footer .footer-block__image,
  .footer .footer-block .media {
    max-width: 170px !important;
  }

  /* El contenedor del logo se centraba con márgenes automáticos,
     y eso el text-align no lo corrige. */
  .footer .footer-col--text .footer-block,
  .footer .footer-col--text .footer-block .media,
  .footer .footer-col--text .footer-block__image,
  .footer .footer-col--text .footer-block > div {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .footer .footer-menu__links {
    margin-top: calc(3 * var(--space-unit));
  }

  .footer .footer-block__social .social {
    justify-content: flex-start !important;
    margin-top: calc(3 * var(--space-unit));
    margin-inline-start: -10px;
  }
}

/* Enlaces algo más juntos entre sí */
.footer .footer-menu li + li,
.footer .footer-menu__links li + li {
  margin-top: calc(1.5 * var(--space-unit));
}
/* formulario pagina personalizar*/
<style>
.cc-contact-form h2 {
  font-size: 32px;
  color: #253327;
}
.cc-contact-form input[type="text"],
.cc-contact-form input[type="email"],
.cc-contact-form textarea {
  border: 1px solid #d8cfc2;
  border-radius: 4px;
  padding: 13px 14px;
  font-size: 16px;
  color: #2c2418;
  background: #fff;
  transition: border-color .2s ease;
}
.cc-contact-form input[type="text"]:focus,
.cc-contact-form input[type="email"]:focus,
.cc-contact-form textarea:focus {
  border-color: #253327;
  outline: none;
}
.cc-contact-form input::placeholder,
.cc-contact-form textarea::placeholder {
  color: #a89e90;
}
.cc-contact-form textarea {
  min-height: 130px;
}
.cc-contact-form .btn--custom {
  background: #253327;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 15px 44px;
  font-size: 15px;
  letter-spacing: .5px;
  transition: opacity .2s ease;
}
.cc-contact-form .btn--custom:hover {
  opacity: .88;
}

@media (max-width: 749px) {
  .cc-contact-form .reading-width,
  .cc-contact-form .container,
  .cc-contact-form .no-padding-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }
  .cc-contact-form h2 {
    font-size: 24px;
  }
  .cc-contact-form .rte,
  .cc-contact-form .rte p {
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
  }
  .cc-contact-form textarea {
    min-height: 110px;
  }
  .cc-contact-form .btn--custom {
    padding: 14px 20px;
  }
}
</style>