/* ==========================================================================
   SUARPE CREACIONES — COMPONENTS
   Requiere design-tokens.css cargado antes que este archivo.

   Convención de especificidad: para sobrescribir WooCommerce/Kadence
   usamos selectores encadenados y más específicos que el tema
   (ej. ".woocommerce div.product .summary .price") en vez de !important.
   !important solo aparece marcado con /* override inevitable */ cuando
   el propio tema o el bloque de WooCommerce inyecta estilos inline o
   con especificidad artificialmente alta que no se puede vencer de otro modo.

   Índice:
   1. Base
   2. Tipografía — utilidades
   3. Botones
   4. Tarjetas
   5. Formularios
   6. Hero premium
   7. Story Section
   8. Instagram Feed
   9. CTA Final
   10. Footer
   11. Header
   12. Animaciones
   13. WooCommerce
   14. Responsive
   ========================================================================== */


/* --------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------- */

*, *::before, *::after{
  box-sizing: border-box;
}

body{
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

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

a{ color: inherit; text-decoration: none; }

/* Foco visible accesible en toda la web, sin depender del navegador */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* Contenedor y ritmo vertical — usados por prácticamente todos los
   componentes de sección (Collection Cards, Story, Testimonials, FAQ,
   Newsletter...). Definidos una sola vez aquí para no repetirlos. */
.sp-container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.sp-section{ padding-block: var(--space-2xl); } /* antes space-3xl (96px) — más compacto */
.sp-section + .sp-section{ padding-top: 0; } /* evita que dos secciones seguidas sumen su padding — el de abajo de la primera ya deja suficiente aire */
.sp-section-alt{ background-color: var(--color-surface-alt); }

/* Compensa el header fijo cuando se navega a una sección por ancla
   (ej. el enlace "Inspiración" del menú, que apunta a /#inspiracion) */
section[id]{ scroll-margin-top: var(--header-clearance); }

/* Cabecera de sección centrada (eyebrow + título + subtítulo) —
   patrón compartido por cualquier sección editorial futura */
.sp-section-header{
  max-width: 640px;
  margin: 0 auto var(--space-xl); /* antes space-2xl (64px) — más compacto */
  text-align: center;
}
.sp-section-header .sp-eyebrow{ text-align: center; }
.sp-section-header p{ color: var(--color-text-muted); margin: var(--space-xs) 0 0; }

/* Pie de sección centrado — CTA tipo "ver todo" bajo un grid.
   Compartido por cualquier sección con listado (Featured Products,
   futuros: Testimonials, Blog...) */
.sp-section-footer{
  text-align: center;
  margin-top: var(--space-2xl);
}


/* --------------------------------------------------------------------
   2. TIPOGRAFÍA — utilidades
   -------------------------------------------------------------------- */

.sp-h1, h1, .entry-title{
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-regular); /* DM Serif Display solo existe en 400 */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin: 0 0 var(--space-md);
}

.sp-h2, h2{
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-regular); /* DM Serif Display solo existe en 400 */
  line-height: var(--leading-tight);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
}

.sp-h3, h3{
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-regular); /* DM Serif Display solo existe en 400 */
  line-height: var(--leading-tight);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
}

.sp-h4, h4{
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-regular); /* DM Serif Display solo existe en 400 */
  color: var(--color-heading);
  margin: 0 0 var(--space-xs);
}

.sp-hero-text{
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-regular); /* DM Serif Display solo existe en 400 */
  line-height: var(--leading-tight);
  color: var(--color-heading);
}

/* Acento dentro de un titular: "Cada regalo *cuenta una historia*" —
   usa DM Serif Display en cursiva (--font-accent-italic), ya que
   Bree Serif (la fuente general de titulares) no tiene itálica real */
.sp-h1 em, .sp-h2 em, .sp-hero-text em, h1 em, h2 em{
  font-family: var(--font-accent-italic);
  font-style: italic;
  color: var(--color-primary);
}

.sp-body-xl{ font-size: var(--text-body-xl); line-height: var(--leading-relaxed); color: var(--color-text); }
.sp-body{ font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--color-text); }
.sp-small{ font-size: var(--text-small); color: var(--color-text-muted); }
.sp-caption{ font-size: var(--text-caption); color: var(--color-text-muted); }

/* Eyebrow — etiqueta pequeña en mayúsculas antes de un titular */
.sp-eyebrow{
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  display: block;
}

.sp-text-muted{ color: var(--color-text-muted); }

/* Utilidad base para cualquier <svg class="sp-icon"><use .../></svg>
   del icon sprite compartido (components/icon-sprite.html) */
.sp-icon{
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
}


/* --------------------------------------------------------------------
   3. BOTONES
   Cuatro variantes × cinco estados (hover, focus, active, disabled, loading)
   -------------------------------------------------------------------- */

.sp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  padding: 0.9em 1.8em;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-standard);
}

/* Primario */
.sp-btn-primary{
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--sp-white);
}
.sp-btn-primary:hover{ background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.sp-btn-primary:focus-visible{ box-shadow: var(--shadow-focus); }
.sp-btn-primary:active{ transform: translateY(0); box-shadow: none; }
.sp-btn-primary:disabled, .sp-btn-primary.is-disabled{ background-color: var(--sp-line); border-color: var(--sp-line); color: var(--color-text-muted); cursor: not-allowed; transform: none; box-shadow: none; }
.sp-btn-primary.is-loading{ color: transparent; position: relative; pointer-events: none; }

/* Secundario — usa el verde salvia, para CTAs de menor jerarquía (ej. "Guardar en favoritos") */
.sp-btn-secondary{
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--sp-white);
}
.sp-btn-secondary:hover{ background-color: var(--color-secondary-hover); border-color: var(--color-secondary-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.sp-btn-secondary:focus-visible{ box-shadow: var(--shadow-focus); }
.sp-btn-secondary:active{ transform: translateY(0); box-shadow: none; }
.sp-btn-secondary:disabled{ background-color: var(--sp-line); border-color: var(--sp-line); color: var(--color-text-muted); cursor: not-allowed; }

/* Outline */
.sp-btn-outline{
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.sp-btn-outline:hover{ background-color: var(--color-primary); color: var(--sp-white); }
.sp-btn-outline:focus-visible{ box-shadow: var(--shadow-focus); }
.sp-btn-outline:active{ background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.sp-btn-outline:disabled{ border-color: var(--sp-line); color: var(--color-text-muted); cursor: not-allowed; }

/* Texto — sin fondo ni borde, para enlaces de acción secundarios ("Ver todos los productos") */
.sp-btn-text{
  background-color: transparent;
  border-color: transparent;
  color: var(--color-primary);
  padding-left: 0;
  padding-right: 0;
  position: relative;
}
.sp-btn-text::after{
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0.2em;
  height: 1px;
  background-color: currentColor;
  transition: right var(--duration-base) var(--ease-out);
}
.sp-btn-text:hover::after{ right: 0; }
.sp-btn-text:focus-visible{ box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.sp-btn-text:disabled{ color: var(--color-text-muted); cursor: not-allowed; }
.sp-btn-text:disabled::after{ display: none; }

/* Spinner de loading, compartido por las variantes */
.sp-btn.is-loading::before{
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sp-spin 0.7s linear infinite;
}


/* --------------------------------------------------------------------
   4. TARJETAS
   -------------------------------------------------------------------- */

.sp-card{
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.sp-card:hover{
  transform: translateY(var(--lift-hover));
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* Tarjeta de producto */
.sp-card-product .sp-card-media{
  aspect-ratio: 1 / 1;
  background-color: var(--color-surface-alt);
  position: relative;
  overflow: hidden;
}
.sp-card-product .sp-card-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.sp-card-product:hover .sp-card-media img{ transform: scale(1.04); }
.sp-card-product{
  display: flex;
  flex-direction: column;
  height: 100%; /* la rejilla ya iguala la altura de las tarjetas de una fila; esto deja que el contenido de dentro lo aproveche */
}
.sp-card-product .sp-card-body{
  padding: var(--space-md) 0 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* ocupa todo el hueco restante de la tarjeta */
}
.sp-card-product .sp-card-body .sp-btn{
  width: 100%;
  justify-content: center;
  margin-top: auto; /* antes solo space-sm — ahora el botón siempre queda pegado abajo, sea cual sea la longitud del título */
}
.sp-card-product .sp-card-title{
  font-family: var(--font-body); /* sans-serif explícito, sin aspecto de enlace clásico */
  font-size: var(--text-body);
  font-weight: var(--weight-semibold); /* ~600, pedido en la revisión artística */
  color: var(--color-heading);
  margin: 0 0 var(--space-xs); /* más separación respecto al precio */
}
.sp-card-product .sp-card-price{
  font-family: var(--font-body); /* antes font-display + primary: demasiado protagonismo */
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}
/* Precio anterior tachado — no requiere HTML nuevo: get_price_html()
   de WooCommerce ya genera <del>/<ins> automáticamente en oferta */
.sp-card-product .sp-card-price del{ opacity: .6; text-decoration: line-through; margin-right: 6px; }
.sp-card-product .sp-card-price ins{ text-decoration: none; color: var(--color-primary); font-weight: var(--weight-semibold); }

/* Envoltorio de insignias — permite apilar varias (ej. "Más vendido" +
   "Hecho a mano") sin que se superpongan entre sí */
.sp-card-badges{
  position: absolute; top: var(--space-xs); left: var(--space-xs); z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.sp-card-product .sp-card-badge{
  background-color: var(--color-primary); color: #fff;
  font-size: var(--text-caption); letter-spacing: var(--tracking-wide);
  padding: 4px 10px; border-radius: var(--radius-xs);
}
/* Insignias artesanales (Hecho a mano, Personalizable...) — tono salvia
   propio, distinto del rosa reservado para reclamos comerciales tipo
   "Más vendido", para que se lean como un matiz de marca, no una oferta */
.sp-card-product .sp-card-badge--handmade{
  background-color: var(--color-secondary);
}
/* Preparadas para el futuro (sin usar todavía — ver hook
   suarpe_product_card_media_before en content-product.php) */
.sp-card-product .sp-card-badge--new{ background-color: var(--color-accent); }
.sp-card-product .sp-card-badge--bestseller{ background-color: var(--color-primary); }

/* Envoltorio de la imagen: relative para que las acciones (favoritos,
   quick view) y una futura segunda imagen en hover puedan colocarse
   encima sin cambiar la estructura. */
.sp-card-media{ position: relative; }
.sp-card-media-link{ display: block; }
.sp-card-title-link{ color: inherit; }
.sp-card-title-link:hover .sp-card-title{ color: var(--color-primary); }

/* Esquina de acciones (favoritos / quick view) — preparada y oculta
   por defecto; el día que se use el hook suarpe_product_card_media_actions,
   solo hay que quitar "display:none" o añadir contenido real aquí */
.sp-card-media-actions{
  position: absolute; top: var(--space-xs); right: var(--space-xs); z-index: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.sp-card-media-actions:empty{ display: none; }
.sp-card-media-actions button{
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background-color: rgba(255,255,255,.9); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-heading); box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.sp-card-media-actions button:hover{ background-color: var(--color-primary); color: #fff; }

/* Segunda imagen al pasar el ratón — preparado para cuando el hook
   suarpe_product_card_media_after imprima una <img> adicional dentro
   de .sp-card-media-link; de momento no hay una segunda imagen, así
   que esta regla no tiene ningún efecto visible todavía. */
.sp-card-media-link img:nth-child(2){
  position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.sp-card-product:hover .sp-card-media-link img:nth-child(2){ opacity: 1; }

/* Grid de Featured Products (Componente 04) — envuelve varias
   .sp-card-product (sección de arriba). Mobile-first: 1 columna,
   ver 14. RESPONSIVE para tablet/desktop. Deliberadamente separado de
   .sp-collection-grid (que desde v2.1 es un carrusel horizontal de
   ancho fijo, no un grid): aquí sí queremos que ocupe todo el ancho
   disponible y se apile por filas.
   .woocommerce ul.products comparte exactamente esta regla: es el
   contenedor que WooCommerce genera automáticamente en cualquier
   listado (categoría, tienda, relacionados) — así ambos quedan
   siempre sincronizados sin duplicar el grid en dos sitios. */
.sp-product-grid,
.woocommerce ul.products{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl) var(--space-lg);
  list-style: none;
  margin: 0 0 var(--space-xl) !important; /* override inevitable: WooCommerce fija su propio margin en ul.products */
  padding: 0;
}

/* Tarjeta de colección — imagen grande con overlay de texto, estilo landing de decoración */
.sp-card-collection{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  border: none;
}
.sp-card-collection img{ width: 100%; height: 100%; object-fit: cover; }
.sp-card-collection::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(61,51,44,0) 40%, rgba(61,51,44,0.55) 100%);
}
.sp-card-collection .sp-card-body{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-lg);
  z-index: 1;
}
.sp-card-collection .sp-card-title{
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--sp-white);
  margin: 0;
}

/* Tarjeta de categoría — circular, minimalista, para el grid de "Encuentra el regalo perfecto" */
.sp-card-category{
  border: none;
  background: transparent;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.sp-card-category:hover{ transform: translateY(var(--lift-hover)); box-shadow: none; }
.sp-card-category .sp-card-icon{
  width: 76px; height: 76px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.sp-card-category:hover .sp-card-icon{ box-shadow: var(--shadow-md); }
.sp-card-category .sp-card-title{ font-size: var(--text-small); color: var(--color-text); }

/* Tarjeta de testimonio */
/* Testimonio (Componente 05) — deliberadamente SIN caja: sin fondo,
   sin borde, sin sombra. El aire entre testimonios es lo que transmite
   calma y elegancia, no un contenedor. Semántica real: <figure>/
   <blockquote>/<figcaption>, ver components/testimonials.html */
.sp-card-testimonial{ max-width: 42ch; }

.sp-testimonial-media{
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--color-surface-alt);
  margin-bottom: var(--space-sm);
}
.sp-testimonial-media img{ width: 100%; height: 100%; object-fit: cover; }

/* Valoración discreta: estrellas pequeñas, color apagado — nunca iconos
   grandes ni saturados */
.sp-rating{
  display: flex;
  gap: 2px;
  color: var(--color-secondary);
  margin-bottom: var(--space-sm);
}
.sp-rating svg{ width: 13px; height: 13px; }

.sp-card-testimonial .sp-quote{
  font-family: var(--font-accent-italic); /* DM Serif Display en cursiva — Bree Serif no la tiene */
  font-style: italic;
  font-size: var(--text-body-xl);
  color: var(--color-heading);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-md);
}
.sp-card-testimonial .sp-author{ font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--color-text); font-style: normal; }
.sp-card-testimonial .sp-author-role{ font-size: var(--text-caption); color: var(--color-text-muted); display: block; margin-top: 2px; }

/* Grid de testimonios — mobile-first: 1 columna apilada con mucho aire
   vertical; 3 columnas en desktop. Sin líneas divisorias entre ellos:
   el espacio en blanco hace de separador. */
.sp-testimonial-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Tarjeta de blog / artículo */
.sp-card-blog .sp-card-media{ aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-sm); }
.sp-card-blog .sp-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.sp-card-blog .sp-card-date{ font-size: var(--text-caption); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.sp-card-blog .sp-card-title{ font-family: var(--font-display); font-size: var(--text-h4); margin: var(--space-xs) 0; }
.sp-card-blog .sp-card-excerpt{ font-size: var(--text-small); color: var(--color-text-muted); }

/* ----------------------------------------------------------------------
   COMPONENTE 02 — Collection / Category Cards (editorial)
   Ver components/collection-cards.html para el HTML y la documentación
   completa. Deliberadamente NO extiende .sp-card (sin borde, sin sombra,
   sin fondo de superficie): la foto es la protagonista, no una caja.
   ---------------------------------------------------------------------- */

.sp-collection-grid{
  display: flex;
  gap: var(--space-xl);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-sm); /* el padding-bottom deja aire para la barra de scroll */
}
/* Barra de scroll fina y en tono de marca (solo navegadores WebKit;
   en el resto se ve la barra nativa del sistema, aceptable) */
.sp-collection-grid::-webkit-scrollbar{ height: 6px; }
.sp-collection-grid::-webkit-scrollbar-track{ background: var(--color-surface-alt); border-radius: var(--radius-full); }
.sp-collection-grid::-webkit-scrollbar-thumb{ background: var(--color-border-hover); border-radius: var(--radius-full); }

.sp-collection-card-item{
  flex: 0 0 clamp(240px, 30vw, 340px); /* ancho fijo por tarjeta: nunca se apila, siempre una sola fila */
  scroll-snap-align: start;
}

.sp-collection-card{
  display: block;
  color: inherit;
}

.sp-collection-media{
  aspect-ratio: 4 / 3; /* antes 4/5 (vertical) — ahora horizontal */
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-surface-alt); /* fallback mientras no hay foto real */
  margin-bottom: var(--space-md);
}
.sp-collection-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.sp-collection-card:hover .sp-collection-media img,
.sp-collection-card:focus-visible .sp-collection-media img{
  transform: scale(1.045);
}

.sp-collection-title{
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-regular); /* DM Serif Display solo existe en 400 */
  color: var(--color-heading);
  margin: 0 0 6px;
  transition: color var(--duration-base) var(--ease-standard);
}
.sp-collection-card:hover .sp-collection-title,
.sp-collection-card:focus-visible .sp-collection-title{
  color: var(--color-primary);
}

.sp-collection-desc{
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-sm);
  max-width: 32ch;
}

/* Reutiliza el estilo de botón de texto ya existente (sección 3. BOTONES)
   en vez de crear un CTA nuevo — mismo subrayado animado en hover */
.sp-collection-card .sp-btn-text{ font-size: var(--text-caption); padding: 0; }

.sp-collection-card:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 6px;
  border-radius: var(--radius-xs);
}


/* --------------------------------------------------------------------
   5. FORMULARIOS
   -------------------------------------------------------------------- */

.sp-field{ margin-bottom: var(--space-md); }
.sp-label{
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.sp-input,
.sp-select,
.sp-textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.sp-input:hover, .sp-select:hover, .sp-textarea:hover{ border-color: var(--color-border-hover); }
.sp-input:focus, .sp-select:focus, .sp-textarea:focus{
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.sp-input.is-error, .sp-select.is-error, .sp-textarea.is-error{ border-color: var(--color-error); }
.sp-input.is-success, .sp-select.is-success, .sp-textarea.is-success{ border-color: var(--color-success); }
.sp-field-message{ font-size: var(--text-caption); margin-top: 4px; }
.sp-field-message.is-error{ color: var(--color-error); }
.sp-field-message.is-success{ color: var(--color-success); }

.sp-textarea{ min-height: 120px; resize: vertical; }

.sp-select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5d52' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 16px;
  padding-right: 2.5em;
}

/* Checkbox y radio personalizados, accesibles (input real oculto visualmente, no display:none) */
.sp-checkbox, .sp-radio{
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-small);
  cursor: pointer;
  position: relative;
}
.sp-checkbox input, .sp-radio input{
  position: absolute;
  opacity: 0;
  width: 18px; height: 18px;
  margin: 0;
  cursor: pointer;
}
.sp-checkbox .sp-control, .sp-radio .sp-control{
  width: 18px; height: 18px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  flex-shrink: 0;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.sp-checkbox .sp-control{ border-radius: var(--radius-xs); }
.sp-radio .sp-control{ border-radius: var(--radius-full); }
.sp-checkbox input:checked + .sp-control,
.sp-radio input:checked + .sp-control{
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.sp-checkbox input:focus-visible + .sp-control,
.sp-radio input:focus-visible + .sp-control{ box-shadow: var(--shadow-focus); }


/* --------------------------------------------------------------------
   6. HERO PREMIUM
   No es un hero de plantilla: composición asimétrica, mucho aire,
   la imagen se funde con el fondo (sin caja, sin sombra dura) en vez
   de vivir dentro de una tarjeta recortada.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. HERO PREMIUM
   La fotografía ES el fondo del hero completo (no un bloque de imagen
   aparte). El texto flota encima sobre un scrim en degradado —crema
   opaco donde está el texto, transparente hacia donde se ve la foto—
   así no se lee como "columna texto + columna imagen" sino como una
   landing de marca de decoración.
   -------------------------------------------------------------------- */

.sp-hero{
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 72vh, 760px);
  padding-top: var(--header-clearance); /* antes sumaba un extra de space-lg — quitado, sube más así */
  display: flex;
  align-items: flex-start; /* antes center — sube el contenido en vez de centrarlo en toda la altura del Hero */
  background-image: var(--hero-bg, none); /* la URL llega vía inline en el componente, ver hero.html */
  background-color: var(--color-surface-alt); /* fallback si --hero-bg no se define */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Scrim: opaco a la izquierda (donde vive el texto), se desvanece hacia
   la derecha para dejar la fotografía a la vista. Si el texto queda
   corto o largo, ajusta los porcentajes de parada. */
.sp-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(248, 242, 231, 0.94) 0%,
    rgba(248, 242, 231, 0.82) 32%,
    rgba(248, 242, 231, 0.32) 58%,
    rgba(248, 242, 231, 0) 76%
  );
}

.sp-hero-copy{
  position: relative;
  z-index: 1;
  max-width: 740px;
  padding: 0 var(--space-lg);
}
.sp-hero-copy p{ max-width: 42ch; color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.sp-hero-actions{ display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); flex-wrap: wrap; }

/* Eyebrow del Hero en una sola línea en escritorio (el reset a wrap
   normal en móvil/tablet está en 10. RESPONSIVE). Escopado a
   .sp-hero-copy para no afectar a los eyebrows centrados de otros
   componentes (Collection Cards, Featured Products, Testimonials...). */
.sp-hero-copy .sp-eyebrow{ white-space: nowrap; }

.sp-hero-trust{
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-hero-trust li{ display: inline-flex; align-items: center; gap: 6px; }


/* --------------------------------------------------------------------
   7. STORY SECTION (Componente 03 — "Nuestra Historia")
   Ver components/story-section.html para el HTML y la documentación
   completa. Foto + texto a dos columnas, muy calmado, sin decoración
   de sobra: el objetivo es cercanía y autenticidad, no espectacularidad.
   -------------------------------------------------------------------- */

.sp-story{ display: block; } /* mobile-first: apilado por defecto, ver 10. RESPONSIVE */

.sp-story-media{
  aspect-ratio: 4 / 3; /* antes 4/5 (vertical) — más baja para reducir el scroll */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface-alt); /* fallback mientras no hay foto real */
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xl);
}
.sp-story-media img{ width: 100%; height: 100%; object-fit: cover; }

.sp-story-content p{
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.sp-story-content p:last-of-type{ margin-bottom: var(--space-lg); }

.sp-story-signature{
  font-family: var(--font-accent-italic); /* DM Serif Display en cursiva — Bree Serif no la tiene */
  font-style: italic;
  font-size: var(--text-body-xl);
  color: var(--color-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-lg);
}
.sp-story-signature span{
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Modificador para alternar el lado de la foto — pensado para reutilizar
   este mismo componente en futuras páginas (ej. "Sobre nosotros" completa)
   sin duplicar CSS. En mobile no tiene efecto (siempre apilado). */
.sp-story--reverse .sp-story-content{ order: -1; }


/* --------------------------------------------------------------------
   8. INSTAGRAM FEED (Componente 06)
   Ver components/instagram-feed.html para el HTML y la documentación
   completa, incluida la nota sobre por qué la conexión real necesita
   un plugin (Smash Balloon o equivalente) en vez de código propio.
   Grid casi sin separación (a diferencia del resto de la web): aquí
   buscamos deliberadamente sensación de "muro de feed", no de rejilla
   editorial con aire.
   -------------------------------------------------------------------- */

.sp-instagram-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-instagram-item{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.sp-instagram-item img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.sp-instagram-item:hover img,
.sp-instagram-item:focus-visible img{ transform: scale(1.05); }

.sp-instagram-overlay{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(61, 51, 44, 0);
  color: #fff;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}
.sp-instagram-item:hover .sp-instagram-overlay,
.sp-instagram-item:focus-visible .sp-instagram-overlay{
  opacity: 1;
  background-color: rgba(61, 51, 44, 0.35);
}
.sp-instagram-overlay svg{ width: 22px; height: 22px; }


/* --------------------------------------------------------------------
   9. CTA FINAL (Componente 07)
   Ver components/cta-final.html para el HTML y la documentación
   completa. Mismo mecanismo técnico que el Hero (variable --cta-bg
   para la foto), pero tratamiento propio: velo uniforme muy ligero
   (no degradado asimétrico), composición centrada, muchísimo más aire
   vertical que cualquier otra sección — es una pausa antes del footer,
   no una sección más. El único contraste de color vive en el botón.
   -------------------------------------------------------------------- */

.sp-cta{
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-4xl); /* el doble que .sp-section (space-3xl) a propósito: es un cierre, no una sección más */
  background-image: var(--cta-bg, none);
  background-color: var(--color-surface-alt); /* fallback si --cta-bg no se define */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Velo uniforme y muy ligero — a diferencia del scrim asimétrico del
   Hero, aquí cubre TODA la foto por igual: la imagen sigue presente,
   solo se atenúa lo justo para que el texto se lea con comodidad. */
.sp-cta::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgba(248, 242, 231, 0.78);
}

.sp-cta-content{
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin-inline: auto;
}
.sp-cta-content .sp-eyebrow{ text-align: center; }
.sp-cta-content h2{ margin-bottom: var(--space-sm); }
.sp-cta-content p{
  color: var(--color-text-muted);
  margin: 0 auto var(--space-lg);
  max-width: 38ch;
}


/* --------------------------------------------------------------------
   10. FOOTER (Componente 08)
   Ver components/footer.html para el HTML y la documentación completa.
   Continuación natural del CTA: fondo crema profundo (mismo token que
   .sp-section-alt), NUNCA oscuro. Separación superior mínima —una
   línea de 1px—, nada de bloque pesado de enlaces. El logo y la frase
   de marca tienen su propio momento antes de las columnas de
   navegación, con mucho espacio, para que se sienta como un cierre
   emocional, no como un típico footer de tienda.
   -------------------------------------------------------------------- */

.sp-footer{
  background-color: var(--color-surface-alt);
  border-top: 1px solid var(--color-border); /* la única "separación": muy sutil, del propio sistema */
  padding-block: var(--space-2xl) var(--space-xl); /* antes space-3xl (96px) arriba — demasiado aire */
}

/* Momento de marca: logo + frase, centrado, con su propio aire antes
   de llegar a las columnas — es el cierre emocional que pediste */
.sp-footer-brand{
  display: flex;
  align-items: center;
  justify-content: center; /* antes sin centrar — quedaba pegado a la izquierda */
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.sp-footer-logo{
  font-family: var(--font-accent-italic); /* DM Serif Display en cursiva — Bree Serif no la tiene */
  font-style: italic;
  font-size: var(--text-h2);
  color: var(--color-primary);
}
.sp-footer-logo-img{
  height: 40px !important; /* override inevitable: en páginas de tienda, WooCommerce carga reglas tipo ".woocommerce img" con más especificidad que la nuestra, y ganaban ellas */
  width: auto !important;
  display: block;
  flex-shrink: 0;
}
.sp-footer-tagline{
  font-family: var(--font-accent-italic); /* antes font-body — más elegante, a juego con el resto de acentos de marca */
  font-style: italic;
  font-size: var(--text-body-xl);
  color: var(--color-primary);
  margin: 0;
}

.sp-footer-columns{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.sp-footer-col h3{
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider); /* antes tracking-wide — un poco más de aire entre letras, más editorial */
  text-transform: uppercase;
  color: var(--color-primary); /* antes color-heading — más presencia de marca */
  margin-bottom: var(--space-sm);
}
.sp-footer-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.sp-footer-col a{
  font-size: var(--text-small);
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--ease-standard);
}
.sp-footer-col a:hover,
.sp-footer-col a:focus-visible{ color: var(--color-primary); }

/* Fila inferior: legal + copyright — deliberadamente discreta, la
   línea más silenciosa de todo el footer */
.sp-footer-bottom{
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  text-align: center;
}
.sp-footer-legal{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}
.sp-footer-legal a{ color: var(--color-text-muted); }
.sp-footer-legal a:hover,
.sp-footer-legal a:focus-visible{ color: var(--color-primary); }


/* --------------------------------------------------------------------
   11. HEADER (Componente 09)
   Ver components/header.html para el HTML y la documentación completa.
   Site-wide (no solo Home): transparente sobre el Hero, se vuelve
   sólido al hacer scroll (clase .is-scrolled, añadida por JS — ver
   assets/js/header.js del tema hijo). El texto se queda siempre en los
   mismos colores oscuros del sistema: el área donde se apoya el header
   dentro del Hero ya es la zona opaca del scrim, así que no hace falta
   una variante de texto en blanco.
   -------------------------------------------------------------------- */

.sp-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  height: var(--header-height); /* fija la barra al hueco ya reservado, aunque el logo sea más alto */
  overflow: visible; /* deja que el logo sobresalga por arriba/abajo sin recortarse */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
  background-color: transparent;
  transition: background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.sp-header.is-scrolled{
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.sp-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sp-header-logo{ display: flex; align-items: center; }
.sp-header-logo img{ height: 150px; width: auto; display: block; } /* reducido un pelín (antes 168px) */
.sp-header-logo{ align-self: flex-start; } /* el sobrante del logo queda solo por debajo del header, nunca recortado por arriba contra el borde de la ventana */

/* Navegación de escritorio */
.sp-nav{
  display: none; /* mobile-first: oculto por defecto, ver 13. RESPONSIVE */
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-nav-item{ position: relative; }
.sp-nav-link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs) 0;
}
.sp-nav-link:hover,
.sp-nav-link:focus-visible,
.sp-nav-item.is-open .sp-nav-link{ color: var(--color-primary); }
.sp-nav-link .sp-icon{ width: 10px; height: 10px; transition: transform var(--duration-base) var(--ease-standard); }
.sp-nav-item.is-open .sp-nav-link .sp-icon{ transform: rotate(180deg); }

/* Dropdown "Tienda" — pensado para crecer: añadir un <li> más no
   requiere ningún cambio de CSS ni de estructura */
.sp-dropdown{
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-sm));
  min-width: 240px;
  margin-top: var(--space-sm);
  padding: var(--space-sm) 0;
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  list-style: none;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              visibility var(--duration-base);
}
.sp-nav-item.is-open .sp-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sp-dropdown a{
  display: block;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-small);
  color: var(--color-text);
}
.sp-dropdown a:hover,
.sp-dropdown a:focus-visible{
  background-color: var(--color-surface-alt);
  color: var(--color-primary);
}

/* Iconos de utilidad (buscar, cuenta, carrito) */
.sp-header-icons{
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.sp-header-icons a,
.sp-header-icons button{
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-heading);
  display: inline-flex;
  position: relative;
}
.sp-header-icons .sp-icon{ width: 20px; height: 20px; }
.sp-cart-count{
  position: absolute;
  top: -6px; right: -8px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 10px;
  width: 16px; height: 16px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
}

/* Botón hamburguesa — solo visible en móvil/tablet, ver 13. RESPONSIVE */
.sp-header-burger{
  display: inline-flex;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-heading);
  padding: var(--space-xs);
}
.sp-header-burger .sp-icon{ width: 22px; height: 22px; }

/* Panel de menú móvil — pantalla completa, misma paleta que el resto
   de la web (nunca un overlay oscuro genérico) */
.sp-mobile-menu{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--color-background);
  padding: var(--space-3xl) var(--space-lg) var(--space-lg);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              visibility var(--duration-base);
}
.sp-mobile-menu.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sp-mobile-menu-close{
  position: absolute;
  top: var(--space-sm); right: var(--space-lg);
  background: none; border: none; cursor: pointer;
  color: var(--color-heading);
}
.sp-mobile-menu-close .sp-icon{ width: 24px; height: 24px; }
.sp-mobile-nav{ list-style: none; margin: 0; padding: 0; }
.sp-mobile-nav > li{ border-bottom: 1px solid var(--color-border); }
.sp-mobile-nav-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) 0;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--color-heading);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.sp-mobile-nav-link .sp-icon{ width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-standard); }
.sp-mobile-nav-item.is-open .sp-mobile-nav-link .sp-icon{ transform: rotate(180deg); }
.sp-mobile-dropdown{
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-standard);
}
.sp-mobile-nav-item.is-open .sp-mobile-dropdown{ max-height: 400px; }
.sp-mobile-dropdown a{
  display: block;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  font-size: var(--text-body);
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------
   12. ANIMACIONES — sutiles, nunca llamativas
   -------------------------------------------------------------------- */

@keyframes sp-fade-in{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes sp-fade-up{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes sp-spin{ to{ transform: rotate(360deg); } }

.sp-anim-fade{ animation: sp-fade-in var(--duration-slow) var(--ease-out) both; }
.sp-anim-fade-up{ animation: sp-fade-up var(--duration-slow) var(--ease-out) both; }

.sp-lift{ transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-standard); }
.sp-lift:hover{ transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-md); }

.sp-scale{ transition: transform var(--duration-base) var(--ease-out); }
.sp-scale:hover{ transform: scale(1.03); }

/* Subrayado animado, para enlaces de texto dentro de párrafos */
.sp-underline{
  position: relative;
  text-decoration: none;
}
.sp-underline::after{
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background-color: currentColor;
  transition: right var(--duration-base) var(--ease-out);
}
.sp-underline:hover::after{ right: 0; }


/* --------------------------------------------------------------------
   13. WOOCOMMERCE
   -------------------------------------------------------------------- */

/* --- Cabecera de archivo (categoría/tienda) — Componente 10 (Categoría)
   Restiliza clases NATIVAS de WooCommerce (no del tema), por eso son
   fiables independientemente de cómo cambie Kadence. --- */
.woocommerce-breadcrumb{
  font-size: var(--text-caption); color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.woocommerce-breadcrumb a{ color: var(--color-text-muted); }
.woocommerce-breadcrumb a:hover{ color: var(--color-primary); }

.woocommerce-products-header{
  display: none; /* Kadence ya pinta título/descripción en .entry-hero; este queda vacío y solo añadía una caja en blanco */
}
.woocommerce-products-header__title{
  font-family: var(--font-display);
  font-size: var(--text-h1);
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
}
.woocommerce-products-header .term-description{
  color: var(--color-text-muted);
  max-width: 640px;
  margin-inline: auto;
}

.woocommerce-result-count,
.woocommerce-ordering{
  font-size: var(--text-small);
  color: var(--color-text-muted);
}
.woocommerce-ordering select{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background-color: var(--color-surface);
  font-family: var(--font-body);
}

/* Avisos (ej. "no se han encontrado productos") — sustituye la caja
   azul por defecto de WooCommerce */
.woocommerce-info, .woocommerce-message, .woocommerce-noreviews{
  background-color: var(--color-surface-alt) !important; /* override inevitable: WooCommerce fija su propio fondo/borde con alta especificidad */
  border: none !important;
  border-left: 3px solid var(--color-primary) !important;
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg) !important;
  color: var(--color-text);
  font-size: var(--text-small);
  list-style: none;
}
.woocommerce-info::before, .woocommerce-message::before{ display: none !important; } /* quita el icono por defecto de WooCommerce, no encaja con el resto de iconografía del sitio */

.woocommerce-pagination{ margin-top: var(--space-2xl); text-align: center; }
.woocommerce-pagination ul.page-numbers{
  display: inline-flex; gap: var(--space-xs); list-style: none; margin: 0; padding: 0;
}
.woocommerce-pagination .page-numbers li{ display: inline-flex; }
.woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span{
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); font-size: var(--text-small); color: var(--color-text-muted);
}
.woocommerce-pagination .page-numbers .current{ background-color: var(--color-primary); color: #fff; }
.woocommerce-pagination .page-numbers a:hover{ background-color: var(--color-surface-alt); }

/* --- Página de producto: layout general (2 columnas) ---
   Usa las clases nativas .images / .summary de WooCommerce — nada de
   HTML propio, así que sigue funcionando aunque cambie el catálogo. */
.woocommerce div.product{
  padding-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 900px){
  .woocommerce div.product{
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-3xl); /* aire entre foto y texto, sin cambios */
    row-gap: var(--space-lg); /* antes iba también a space-3xl (96px) — ahora 32px, para no sumar tanto al hueco de la columna más corta */
    align-items: start;
  }
}
/* Tabs y relacionados son hermanos de .images/.summary en el HTML de
   WooCommerce — deben ocupar el ancho completo, no una sola columna */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related.products,
.woocommerce div.product > .upsells.products{
  grid-column: 1 / -1;
}
.woocommerce div.product .product_title{
  font-family: var(--font-display);
  font-size: var(--text-h1);
  color: var(--color-heading);
}

/* --- Franja de confianza (ver suarpe_product_trust_strip en functions.php) --- */
.sp-product-trust{ margin: var(--space-md) 0 var(--space-lg); }

/* --- Descripción corta como "contenido de la cesta" ---
   Si se escribe una lista con viñetas en el campo nativo "Descripción
   corta" de WooCommerce, sale automáticamente con este estilo — cero
   HTML/campos nuevos que mantener. */
.woocommerce-product-details__short-description ul{
  list-style: none; margin: 0 0 var(--space-lg); padding: 0;
}
.woocommerce-product-details__short-description ul li{
  position: relative; padding: 6px 0 6px 1.6em;
  font-size: var(--text-small); color: var(--color-text);
  border-bottom: 1px dashed var(--color-border);
}
.woocommerce-product-details__short-description ul li::before{
  content: "✓"; position: absolute; left: 0; top: 6px;
  color: var(--color-primary); font-weight: var(--weight-semibold);
}

/* --- Galería y miniaturas --- */
.woocommerce div.product div.images{
  border-radius: var(--radius-md);
  overflow: hidden;
  width: 100% !important; /* override inevitable: Kadence/WooCommerce fijan un ancho tipo 48% pensado para su maquetación antigua por flotantes, que aquí deja hueco vacío dentro de la columna del grid */
  float: none !important;
  max-width: none !important;
}
/* Altura fija 4:3 para la galería principal (misma proporción que
   Collection Cards y Featured Products, coherencia en todo el sitio).
   Sin esto, cada foto que subas da una altura de galería distinta
   (según sea cuadrada o muy vertical), y cuanto más alta, más hueco
   en blanco queda bajo la columna de info del producto (más corta). */
.woocommerce-product-gallery .flex-viewport{
  height: auto !important; /* anula el alto en px que calcula el JS del slider */
  aspect-ratio: 4 / 3 !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .woocommerce-product-gallery__image{
  height: 100% !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.woocommerce div.product div.summary{
  width: 100% !important; /* mismo motivo que arriba */
  float: none !important;
  max-width: none !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image{
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface-alt);
}
.woocommerce div.product div.images .flex-control-thumbs li img{
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active{
  opacity: 1;
  border-color: var(--color-primary);
}

/* --- Precio --- */
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-regular); /* DM Serif Display solo existe en 400 */
  color: var(--color-primary);
}
.woocommerce div.product p.price del{
  color: var(--color-text-muted);
  font-size: 0.7em;
  opacity: 0.7;
}
.woocommerce div.product p.price ins{
  text-decoration: none;
}

/* --- Selector de cantidad --- */
.woocommerce div.product form.cart .quantity{
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-right: var(--space-sm);
}
.woocommerce div.product form.cart .quantity .qty{
  width: 3.5em;
  text-align: center;
  border: none;
  padding: 0.7em 0;
}
.woocommerce div.product form.cart .quantity .qty:focus{ box-shadow: none; outline: none; }

/* --- Botón comprar / añadir al carrito ---
   WooCommerce aplica su propia clase .single_add_to_cart_button con
   especificidad y a veces !important desde el tema. Encadenamos
   selectores todo lo posible antes de recurrir a !important. */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce a.button.single_add_to_cart_button{
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  padding: 0.9em 2em;
  transition: background-color var(--duration-base) var(--ease-standard);
  /* Defensivo: Kadence puede fijar height/line-height/overflow propios
     en botones de formulario que cortan el texto cuando ocupa más de
     una línea de alto — forzamos que la caja se adapte siempre al
     contenido real. */
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: normal;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{
  background-color: var(--color-primary-hover) !important; /* override inevitable: Kadence fuerza !important en su .button:hover */
}

/* --- Productos relacionados / destacados --- */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2{
  font-family: var(--font-display);
  font-size: var(--text-h2);
  text-align: center;
  margin-bottom: var(--space-xl);
}
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product{
  transition: transform var(--duration-base) var(--ease-out);
}
.woocommerce .related.products ul.products li.product:hover,
.woocommerce .upsells.products ul.products li.product:hover{
  transform: translateY(var(--lift-hover));
}

/* --- Pestañas (Descripción / Detalles / Envíos y devoluciones) --- */
.woocommerce-tabs{ margin-top: 0; } /* antes space-3xl — el grid del producto ya pone su propio "gap" entre filas; esto lo duplicaba */
.woocommerce-tabs ul.tabs{
  display: flex; gap: var(--space-lg); list-style: none;
  margin: 0 0 var(--space-lg); padding: 0;
  border-bottom: 1px solid var(--color-border);
}
.woocommerce-tabs ul.tabs li{ margin: 0; }
.woocommerce-tabs ul.tabs li a{
  display: inline-block; padding: var(--space-sm) 0;
  font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-semibold);
  color: var(--color-text-muted); border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a{ color: var(--color-primary); border-color: var(--color-primary); }
.woocommerce-Tabs-panel{
  max-width: none; /* antes 70ch (ancho editorial de lectura) — ahora ocupa todo el ancho disponible, a petición */
  color: var(--color-text);
  font-size: var(--text-small); line-height: var(--leading-relaxed);
}
.woocommerce-Tabs-panel h2{ font-family: var(--font-display); font-size: var(--text-h4); margin-bottom: var(--space-sm); }

/* --- Carrito --- */
.woocommerce table.shop_table{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-collapse: separate;
  overflow: hidden;
}
.woocommerce table.shop_table th{
  background-color: var(--color-surface-alt);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.woocommerce table.shop_table td, .woocommerce table.shop_table th{
  border-color: var(--color-border);
}
.woocommerce-cart table.cart img{ border-radius: var(--radius-sm); }

/* --- Checkout --- */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order{
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select{
  border-radius: var(--radius-sm);
  border-color: var(--color-border);
}
.woocommerce #payment #place_order{
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-xs);
  font-weight: var(--weight-semibold);
  padding: 1em 2em;
}
.woocommerce #payment #place_order:hover{
  background-color: var(--color-primary-hover);
}

/* --- Mi cuenta --- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  border-right: 1px solid var(--color-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  font-size: var(--text-small);
  color: var(--color-text-muted);
  padding: var(--space-xs) 0;
  display: block;
  transition: color var(--duration-fast) var(--ease-standard);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  color: var(--color-primary);
}


/* --------------------------------------------------------------------
   14. RESPONSIVE
   mobile: hasta 599px · tablet: 600–899px · laptop: 900–1279px · desktop: 1280px+
   Enfoque mobile-first: los estilos base ya sirven para mobile;
   aquí solo se añade lo que cambia en pantallas mayores.
   -------------------------------------------------------------------- */

/* Tablet en adelante */
@media (min-width: 600px){
  .sp-card-collection{ aspect-ratio: 3 / 4; }
  .sp-product-grid, .woocommerce ul.products{ grid-template-columns: repeat(2, 1fr); }
  .sp-instagram-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Desktop */
@media (min-width: 900px){
  .sp-product-grid, .woocommerce ul.products{ grid-template-columns: repeat(4, 1fr); }
  .sp-testimonial-grid{ grid-template-columns: repeat(3, 1fr); }
  .sp-instagram-grid{ grid-template-columns: repeat(6, 1fr); }

  .sp-story{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-3xl);
  }
  .sp-story-media{ margin-bottom: 0; }

  .sp-footer-columns{
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }
  .sp-footer-bottom{
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .sp-nav{ display: flex; }
  .sp-header-burger{ display: none; }
}

/* Hasta laptop: el scrim pasa de horizontal a vertical (de abajo hacia
   arriba) porque la composición izquierda/derecha deja de tener sentido
   en pantallas estrechas; el texto se ancla abajo sobre la foto */
@media (max-width: 899px){
  .sp-hero{
    min-height: clamp(480px, 85vh, 640px);
    align-items: flex-end;
    padding-bottom: var(--space-2xl);
  }
  .sp-hero::before{
    background: linear-gradient(
      0deg,
      rgba(248, 242, 231, 0.96) 0%,
      rgba(248, 242, 231, 0.88) 42%,
      rgba(248, 242, 231, 0.25) 78%,
      rgba(248, 242, 231, 0) 100%
    );
  }
  .sp-hero-copy{ max-width: 100%; }
  .sp-hero-copy p{ max-width: 100%; }
  .sp-hero-copy .sp-eyebrow{ white-space: normal; } /* en móvil/tablet puede volver a partirse */
}

/* Mobile: reducir la escala de espaciados grandes para no dejar
   demasiado aire vacío en pantallas pequeñas */
@media (max-width: 599px){
  :root{
    --space-3xl: 4rem;
    --space-4xl: 5rem;
  }
  .sp-hero-actions{ flex-direction: column; align-items: stretch; }
}

/* --- Aviso emergente (popup) — solo Home, solo primera visita ---
   Ver suarpe_render_announcement_popup() en functions.php */
.sp-announcement-overlay{
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background-color: rgba(61, 51, 44, .55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
}
.sp-announcement-overlay[hidden]{ display: none; }
.sp-announcement-modal{
  position: relative;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2xl) var(--space-xl);
  max-width: 440px;
  width: 100%;
  text-align: center;
}
.sp-announcement-close{
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  width: 32px; height: 32px;
  border: none; background: none;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer; color: var(--color-text-muted);
}
.sp-announcement-close:hover{ color: var(--color-primary); }
.sp-announcement-text{
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--color-heading);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-lg);
}
.sp-announcement-text p{ margin: 0 0 var(--space-sm); }
.sp-announcement-text p:last-child{ margin-bottom: 0; }

/* --- Página de Contacto --- */

/* Migaja de pan genérica (reutilizable en cualquier página propia,
   no solo WooCommerce) */
.sp-breadcrumb{
  font-size: var(--text-caption); color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.sp-breadcrumb a{ color: var(--color-text-muted); }
.sp-breadcrumb a:hover{ color: var(--color-primary); }

/* Aviso genérico (éxito/error de formularios, etc.) — mismo lenguaje
   visual que ya usamos para los avisos de WooCommerce */
.sp-notice{
  background-color: var(--color-surface-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text); font-size: var(--text-small);
  margin-bottom: var(--space-lg);
}

/* Lista con check ✓ genérica (la misma idea que "contenido de la
   cesta" en producto, pero reutilizable en cualquier sitio) */
.sp-content-list{ list-style: none; margin: 0; padding: 0; }
.sp-content-list li{
  position: relative; padding: 8px 0 8px 1.6em;
  font-size: var(--text-small); color: var(--color-text);
  border-bottom: 1px dashed var(--color-border);
}
.sp-content-list li::before{
  content: "✓"; position: absolute; left: 0; top: 8px;
  color: var(--color-primary); font-weight: var(--weight-semibold);
}

.sp-contact-intro{ text-align: center; }
.sp-contact-intro .sp-breadcrumb{ text-align: left; }
.sp-contact-lead{
  max-width: 60ch; margin: var(--space-md) auto var(--space-xl);
  color: var(--color-text-muted);
}

/* Sección de foto+velo con las dos primeras tarjetas encima — mismo
   mecanismo que .sp-cta (ver sección CTA FINAL): la foto llega vía
   variable --contact-bg, con un velo uniforme crema por encima para
   que las tarjetas se lean con comodidad. */
.sp-contact-photo-section{
  position: relative;
  isolation: isolate;
  width: 100vw; /* a pantalla completa, sin depender del ancho de página que tenga Kadence */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: var(--space-lg); /* antes space-4xl (me equivoqué, la subí en vez de bajarla) — ahora más baja y panorámica */
  background-image: var(--contact-bg, none);
  background-color: var(--color-surface-alt); /* fallback si --contact-bg no se define */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sp-contact-photo-section::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgba(248, 242, 231, 0.5); /* antes 0.85 — mucho menos velo, la foto se ve más */
}
.sp-contact-photo-section .sp-contact-grid{
  position: relative;
  z-index: 1;
  margin-bottom: 0; /* aquí no hay nada debajo dentro de esta sección */
}

.sp-contact-trust{ justify-content: center; }

.sp-contact-grid{ display: grid; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.sp-contact-grid:last-child{ margin-bottom: 0; } /* si es el último de la sección, el padding de la sección ya da suficiente aire */
.sp-contact-grid-2{ grid-template-columns: 1fr; }
.sp-contact-grid-3{ grid-template-columns: 1fr; }
@media (min-width: 900px){
  .sp-contact-grid-2{ grid-template-columns: 1fr 1.4fr; }
  .sp-contact-grid-3{ grid-template-columns: repeat(3, 1fr); }
}

.sp-contact-card{
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
}
/* Las tarjetas que van ENCIMA de la foto llevan transparencia, para
   que se integren con la imagen en vez de verse como un bloque
   blanco opaco — solo afecta a estas, no a las demás tarjetas de
   Contacto que están sobre fondo liso. */
.sp-contact-photo-section .sp-contact-card{
  background-color: rgba(255, 253, 249, 0.55); /* antes 0.82 — bastante menos presencia de blanco */
  backdrop-filter: blur(6px); /* suaviza lo que se ve detrás, sin taparlo del todo */
}
.sp-contact-card--alt{ background-color: var(--color-surface-alt); box-shadow: none; }
.sp-contact-card p{ color: var(--color-text-muted); font-size: var(--text-small); line-height: var(--leading-relaxed); }
.sp-contact-detail{ margin-bottom: var(--space-md); }
.sp-contact-whatsapp{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-xs);
  padding: 6px 14px; font-size: var(--text-caption);
}
.sp-contact-whatsapp .sp-icon{ width: 15px; height: 15px; }
.sp-contact-detail:last-child{ margin-bottom: 0; }
.sp-contact-detail a{ color: var(--color-primary); }

.sp-contact-form-wrap{ max-width: 720px; }
.sp-contact-form{ margin-top: var(--space-lg); }
.sp-contact-form-row{ display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 600px){
  .sp-contact-form-row{ grid-template-columns: 1fr 1fr; }
}
.sp-contact-form label{
  display: block; font-size: var(--text-small); font-weight: var(--weight-semibold);
  color: var(--color-heading); margin-bottom: var(--space-md);
}
.sp-contact-form input[type="text"],
.sp-contact-form input[type="email"],
.sp-contact-form input[type="tel"],
.sp-contact-form textarea{
  display: block; width: 100%; margin-top: var(--space-xs);
  padding: .7em 1em; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-body);
  background-color: var(--color-surface);
}
.sp-contact-honeypot{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sp-contact-privacy{ display: flex !important; align-items: center; gap: var(--space-xs); font-weight: var(--weight-regular) !important; }
.g-recaptcha{ margin: var(--space-md) 0; }
.sp-contact-privacy input{ width: auto !important; margin: 0 !important; }

.sp-contact-quote{
  background-color: var(--color-primary);
  width: 100vw; /* a pantalla completa, mismo mecanismo que .sp-contact-photo-section */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: var(--space-2xl);
  text-align: center;
}
.sp-contact-quote p{
  font-family: var(--font-accent-italic); font-style: italic;
  font-size: var(--text-h3); color: #fff;
  max-width: 60ch; margin: 0 auto;
}

/* --- "Así hablan de nosotros" — menciones de prensa --- */
.sp-press-grid{
  display: grid; gap: var(--space-lg);
  grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0;
}
@media (min-width: 700px){
  .sp-press-grid{ grid-template-columns: repeat(2, 1fr); }
}
.sp-press-card{
  position: relative;
  background-color: transparent; /* antes color-surface (blanco) — se salía del tono cálido de la sección */
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  display: flex; flex-direction: column; gap: var(--space-md);
  transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.sp-press-card:hover{ transform: translateY(var(--lift-hover)); border-color: var(--color-border-hover); }
.sp-press-outlet{
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--color-primary);
  letter-spacing: 0.02em;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  width: fit-content;
}
.sp-press-quote{
  color: var(--color-text); font-size: var(--text-body);
  line-height: var(--leading-relaxed); flex-grow: 1;
}
.sp-press-card .sp-btn-text{ align-self: flex-start; }