/** Shopify CDN: Minification failed

Line 227:0 Unexpected "}"

**/
/* ----------------------------------------------------------------
   PLACA 5 — capa de estilo propia sobre Savor.
   Borrar este archivo y su <link> en layout/theme.liquid lo revierte
   todo sin tocar el tema base.
   ---------------------------------------------------------------- */

/* --- Header flotante en cápsulas ------------------------------- */

#header-component .header__columns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}

#header-component .header__column--left,
#header-component .header__column--right {
  width: auto;
  min-width: 0;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--placa-capsula-borde);
  background: var(--placa-capsula-fondo);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.25s ease, border-color 0.25s ease;
}

/* Sobre la foto del hero: cápsula oscura translúcida */
#header-component[transparent]:not([data-sticky-state='active']) {
  --placa-capsula-fondo: rgba(18, 18, 18, 0.42);
  --placa-capsula-borde: rgba(255, 255, 255, 0.18);
}

/* Resto de páginas y header anclado: cápsula clara */
#header-component:not([transparent]),
#header-component[data-sticky-state='active'] {
  --placa-capsula-fondo: rgba(243, 243, 243, 0.82);
  --placa-capsula-borde: rgba(26, 26, 26, 0.10);
}

/* --- Hero: titular display a la Eco Pulse ---------------------- */

.hero-wrapper h1 {
  font-size: clamp(2.75rem, 7.5vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Subtítulo del hero: discreto, como en la referencia */
.hero-wrapper p {
  opacity: 0.82;
  max-width: 34ch;
}

/* --- Hover del menú: no romper el header transparente ---------- */
/* Savor vuelve el header opaco (y despliega un underlay blanco) al
   pasar el ratón por el menú. Aquí se mantiene el estado por defecto. */

#header-component[transparent]:not([data-sticky-state='active']):has(.menu-list__link:hover),
#header-component[transparent]:not([data-sticky-state='active']):has(.mega-menu__list:hover),
#header-component[transparent]:not([data-sticky-state='active']):has(header-menu[aria-expanded='true']) {
  --header-logo-display: none;
  --header-logo-inverse-display: block;
  --closed-underlay-height: 0;
}

#header-component[transparent]:not([data-sticky-state='active']):has(.menu-list__link:hover) .header__row,
#header-component[transparent]:not([data-sticky-state='active']):has(.mega-menu__list:hover) .header__row,
#header-component[transparent]:not([data-sticky-state='active']):has(header-menu[aria-expanded='true']) .header__row {
  --color-foreground: var(--color-transparent-text);
  --color-foreground-rgb: var(--color-transparent-text-rgb);
  --color-border: var(--color-transparent-text);
  --color-border-rgb: var(--color-transparent-text-rgb);
  --color-primary-button-background: var(--color-transparent-text);
  --color-primary-button-text: var(--color-transparent-text-contrast);
}

/* --- Movimiento ligado al scroll ------------------------------- */
/* CSS puro: sin JS, sin librerías, sin coste en el hilo principal.
   Doble salvaguarda: se desactiva si el usuario pide menos movimiento
   y si el navegador no soporta scroll-driven animations.            */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* El hero se asienta: la imagen sale ligeramente ampliada y
       vuelve a su escala mientras haces el primer scroll. */
    .hero-wrapper .hero__media-grid {
      animation: placa-asentar linear both;
      animation-timeline: scroll();
      animation-range: 0 100vh;
      will-change: transform;
    }

    @keyframes placa-asentar {
      from { transform: scale(1.06); }
      to   { transform: scale(1); }
    }

    /* El titular se despide al dejar el hero, en vez de irse seco. */
    .hero-wrapper .group-block {
      animation: placa-despedir linear both;
      animation-timeline: scroll();
      animation-range: 0 72vh;
    }

    @keyframes placa-despedir {
      from { opacity: 1; transform: none; }
      to   { opacity: 0; transform: translateY(-1.75rem); }
    }

    /* Las secciones posteriores entran al asomar. */
    #MainContent > .shopify-section:not(:first-child) {
      animation: placa-entrar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }

    @keyframes placa-entrar {
      from { opacity: 0; transform: translateY(2rem); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* --- Compra sin desvíos ---------------------------------------- */
/* Se oculta el acceso a cuenta del header: la tienda no requiere
   login para pagar (loginRequiredAtCheckout = false) y el icono solo
   invita a un desvío. Borra esta regla para recuperarlo.           */

.account-button {
  display: none;
}

/* --- FAQ de la home: cápsulas centradas y animadas -------------- */
/* Mismo lenguaje que las cápsulas del header: 14px de radio, borde
   tenue y superficie clara. El acordeón es <details> nativo.       */

[id$="__faq_home"] .accordion {
  width: min(100%, 46rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

[id$="__faq_home"] accordion-custom {
  display: block;
  border: 1px solid rgba(26, 26, 26, 0.1);
  border-radius: 14px;
  background: rgba(243, 243, 243, 0.55);
  transition: background 0.25s ease, border-color 0.25s ease;
}

[id$="__faq_home"] accordion-custom:hover,
[id$="__faq_home"] details[open] {
  background: rgba(243, 243, 243, 1);
  border-color: rgba(26, 26, 26, 0.16);
}

[id$="__faq_home"] .details__header {
  padding: 1.05rem 1.4rem;
  cursor: pointer;
}

[id$="__faq_home"] .details-content {
  padding: 0 1.4rem 1.15rem;
}

/* El "+" gira hasta convertirse en "×" al abrir.
   Savor oculta el trazo vertical para dejar un "−"; aquí se
   recuperan los dos trazos y se gira el icono entero 45°.  */
[id$="__faq_home"] .icon-plus {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

[id$="__faq_home"] .icon-plus svg path {
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

[id$="__faq_home"] details[open] .icon-plus {
  transform: rotate(45deg);
}

[id$="__faq_home"] details[open] .icon-plus svg path {
  opacity: 1;
  transform: none;
}

/* Apertura: el contenido entra con fundido y desplazamiento.
   Nota: la altura del <details> no se puede transicionar con este
   marcado (::details-content no responde en Savor), así que se
   anima el contenido, que es lo que el ojo percibe.            */
  [id$="__faq_home"] details[open] .details-content {
    animation: placa-faq-abrir 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes placa-faq-abrir {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to   { opacity: 1; transform: none; }
  }

  /* Las filas entran escalonadas al asomar */
  @supports (animation-timeline: view()) {
    [id$="__faq_home"] accordion-custom {
      animation: placa-faq-entrar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }

    @keyframes placa-faq-entrar {
      from { opacity: 0; transform: translateY(1.1rem); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* --- Resto de la home: mismo lenguaje que las cápsulas --------- */
/* 14px de radio en todo, igual que el header y la FAQ.           */

/* Carrusel de productos — el radio lo fijan los ajustes de bloque */
[id*="product_list"] product-card {
  transition: opacity 0.25s ease;
}

[id*="product_list"] .resource-list:hover product-card:not(:hover) {
  opacity: 0.55;
}

/* Vídeo de "Más reseñas y seguidores" */
[id$="section_RhpYRt"] deferred-media,
[id$="section_RhpYRt"] deferred-media video,
[id$="section_RhpYRt"] .deferred-media__poster-button {
  border-radius: 14px;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Las tarjetas de producto entran escalonadas, como las de la FAQ */
    [id*="product_list"] .resource-list__item {
      animation: placa-faq-entrar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

/* --- Página de contacto ---------------------------------------- */
/* Título, subtítulo y formulario comparten una sola columna de
   42rem. Antes cada bloque traía su propio ancho y el formulario
   quedaba 53px desplazado respecto al texto.
   Se engancha a .contact-form, que solo existe en esta página.   */

body:has(.contact-form) .text-block,
body:has(.contact-form) .contact-form {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  text-align: start;
}

body:has(.contact-form) main h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

body:has(.contact-form) [class*="__encabezado_sub"] p {
  font-size: 1.0625rem;
  line-height: 1.6;
  opacity: 0.7;
  max-width: none;
  margin-inline: 0;
}

/* Sin caja contenedora: cada campo ya es una cápsula, igual que
   las del header. El fondo y el borde salen de la paleta del tema
   (palette_input_background / palette_input_border).            */
body:has(.contact-form) .contact-form {
  padding: 0;
  border: none;
  background: none;
}

body:has(.contact-form) .contact-form textarea {
  min-height: 8rem;
  height: 8rem;
}

/* Al enfocar, el campo se aclara: mismo gesto que el hover de las
   cápsulas del header y de la FAQ. */
body:has(.contact-form) .contact-form :is(input, textarea) {
  transition: background-color 0.25s ease;
}

body:has(.contact-form) .contact-form :is(input, textarea):focus {
  background-color: #ffffff;
}

/* La imagen de contacto no debe crecer sin límite en pantallas
   anchas: si lo hace, arrastra la columna de texto hacia abajo. */
body:has(.contact-form) main img {
  max-height: 34rem;
  object-fit: cover;
  width: 100%;
}

/* --- Esqueleto de carga y barra de progreso -------------------- */
/* El brillo solo corre mientras la imagen no ha decodificado; al
   terminar, data-p5="ok" lo apaga y deja de consumir pintado.    */

img[data-p5='cargando'] {
  background-color: rgba(26, 26, 26, 0.05);
  background-image: linear-gradient(
    100deg,
    rgba(26, 26, 26, 0) 30%,
    rgba(26, 26, 26, 0.06) 50%,
    rgba(26, 26, 26, 0) 70%
  );
  background-size: 220% 100%;
  border-radius: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  img[data-p5='cargando'] {
    animation: placa-brillo 1.3s ease-in-out infinite;
  }
}

@keyframes placa-brillo {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* Barra de progreso al navegar */
.p5-progreso {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 9999;
  block-size: 2px;
  inline-size: 0;
  background: #e85d04;
  pointer-events: none;
}

.p5-progreso[data-estado='activa'] {
  animation: placa-progreso 2.2s cubic-bezier(0.1, 0.6, 0.3, 1) forwards;
}

@keyframes placa-progreso {
  from { inline-size: 0; opacity: 1; }
  60%  { inline-size: 72%; opacity: 1; }
  to   { inline-size: 92%; opacity: 1; }
}

/* --- Páginas tipo documento ------------------------------------ */
/* Legal y ayuda, con lectura de documento: medida corta, jerarquía
   clara y numeración automática de apartados.                     */

.plantilla-documento main {
  --doc-medida: 38rem;
}

.plantilla-documento .section .rte,
.plantilla-documento [class*="__heading"] {
  max-width: var(--doc-medida);
  margin-inline: auto;
}

/* Título del documento */
.plantilla-documento [class*="__heading"] h1 {
  font-size: clamp(1.875rem, 3.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid rgba(26, 26, 26, 0.12);
  margin: 0;
}

/* Cuerpo: medida y ritmo de lectura larga */
.plantilla-documento .rte {
  font-size: 1rem;
  line-height: 1.75;
}

.plantilla-documento .rte > p,
.plantilla-documento .rte > ul,
.plantilla-documento .rte > ol,
.plantilla-documento .rte > blockquote {
  margin-block: 0 1.1rem;
  max-width: var(--doc-medida);
}

/* Apartados numerados automáticamente */
.plantilla-documento .rte {
  counter-reset: apartado;
}

.plantilla-documento .rte h2 {
  counter-increment: apartado;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  margin-block: 2.5rem 0.75rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(26, 26, 26, 0.09);
  display: flex;
  gap: 0.7rem;
}

.plantilla-documento .rte h2::before {
  content: counter(apartado);
  flex: 0 0 auto;
  min-inline-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: #e85d04;
  font-weight: 600;
}

.plantilla-documento .rte h2:first-child {
  margin-block-start: 1.5rem;
}

.plantilla-documento .rte h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-block: 1.75rem 0.5rem;
}

/* Listas con sangría de documento */
.plantilla-documento .rte :is(ul, ol) {
  padding-inline-start: 1.5rem;
}

.plantilla-documento .rte li {
  margin-block-end: 0.5rem;
}

/* "Última actualización": ficha del documento, no párrafo suelto */
.plantilla-documento .rte > p:first-child {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  opacity: 0.55;
  margin-block-end: 0;
}

/* El modelo de desistimiento, como bloque citado */
.plantilla-documento .rte blockquote {
  padding: 1.15rem 1.35rem;
  border: 1px solid rgba(26, 26, 26, 0.1);
  border-radius: 14px;
  background: rgba(243, 243, 243, 0.5);
  font-size: 0.9375rem;
}

.plantilla-documento .rte blockquote p:last-child {
  margin-block-end: 0;
}

.plantilla-documento .rte a {
  text-underline-offset: 0.2em;
}

/* Al imprimir o guardar como PDF */
@media print {
  .plantilla-documento :is(header, footer, .header-section) {
    display: none;
  }

  .plantilla-documento .rte h2 {
    break-after: avoid;
  }
}

/* --- Aviso de cookies ------------------------------------------ */
/* Banner nativo de Shopify (#shopify-pc__*), reducido a una barra
   compacta: texto a la izquierda, acciones a la derecha.
   Se antepone "html" para ganar a los estilos que Shopify inyecta
   después en el documento.
   Aceptar y Rechazar mantienen el mismo tamaño y presencia: la
   AEPD exige que rechazar sea tan fácil como aceptar.            */

html #shopify-pc__banner {
  inset-block-end: 0.75rem;
  inset-inline: 0.75rem;
  margin-inline: auto;
  max-inline-size: 58rem;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 22px rgba(26, 26, 26, 0.09);
  padding: 0;
}

html #shopify-pc__banner .shopify-pc__banner__wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
}

/* El título repite lo que ya dice el texto: fuera */
html #shopify-pc__banner__body-title {
  display: none;
}

html #shopify-pc__banner .shopify-pc__banner__body {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  opacity: 0.6;
}

html #shopify-pc__banner .shopify-pc__banner__btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  margin: 0;
}

/* Aceptar y Rechazar: mismas dimensiones, misma jerarquía */
html #shopify-pc__banner__btn-accept,
html #shopify-pc__banner__btn-decline {
  flex: 0 0 auto;
  min-block-size: 2.25rem;
  min-inline-size: 6.5rem;
  padding: 0 1.1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

html #shopify-pc__banner__btn-accept {
  background: #e85d04;
  color: #1a1a1a;
  border-color: #e85d04;
}

html #shopify-pc__banner__btn-accept:hover {
  background: #d35503;
  border-color: #d35503;
}

html #shopify-pc__banner__btn-decline {
  background: rgba(243, 243, 243, 0.9);
  color: #1a1a1a;
  border-color: rgba(26, 26, 26, 0.14);
}

html #shopify-pc__banner__btn-decline:hover {
  background: #ececec;
  border-color: rgba(26, 26, 26, 0.24);
}

/* Preferencias: enlace discreto, no compite con las dos opciones */
html #shopify-pc__banner__btn-manage-prefs {
  flex: 0 0 auto;
  min-block-size: 2.25rem;
  padding: 0 0.4rem;
  background: none;
  border: none;
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  opacity: 0.55;
  white-space: nowrap;
  cursor: pointer;
}

html #shopify-pc__banner__btn-manage-prefs:hover {
  opacity: 1;
}

/* Ventana de preferencias, mismo tratamiento */
html #shopify-pc__prefs .shopify-pc__prefs__dialog {
  border-radius: 14px;
  border: 1px solid rgba(26, 26, 26, 0.12);
}

html #shopify-pc__prefs button {
  border-radius: 10px;
}

@media screen and (max-width: 749px) {
  html #shopify-pc__banner .shopify-pc__banner__btns {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  /* Aceptar y Rechazar comparten fila: apilarlos dobla la altura */
  html #shopify-pc__banner__btn-accept,
  html #shopify-pc__banner__btn-decline {
    flex: 1 1 0;
    min-inline-size: 0;
  }

  /* Preferencias baja a su propia línea sin aplastar a los otros */
  html #shopify-pc__banner__btn-manage-prefs {
    order: 3;
    flex: 1 0 100%;
    text-align: center;
  }
}