/* Sara Parwa - estilos del sitio publico.
   Todos los colores salen de tokens.css. Ningun hex literal aqui,
   salvo el patron SVG de la franja de rombos. */

/* ---------- Estructura ---------- */
.contenedor { max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 var(--margen-lateral); }

.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accion); color: var(--color-sobre-accion);
  padding: var(--e-3) var(--e-4); border-radius: 0 0 var(--radio-md) 0;
}
.salto-contenido:focus { left: 0; }

/* ---------- Elemento firma: la franja de rombos del ruedo ---------- */
.franja-rombos {
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 L3 0 L6 3 L3 6 Z' fill='%23D40B5C'/%3E%3Cpath d='M6 3 L9 0 L12 3 L9 6 Z' fill='%231BA7B8'/%3E%3Cpath d='M12 3 L15 0 L18 3 L15 6 Z' fill='%23F2B705'/%3E%3Cpath d='M18 3 L21 0 L24 3 L21 6 Z' fill='%231E8A54'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 18px 9px;
}

/* ---------- Cabecera ---------- */
.cabecera {
  background: var(--color-superficie); position: sticky; top: 0; z-index: 50;
  box-shadow: 0 0 0 rgba(42, 32, 24, 0); transition: box-shadow var(--transicion);
}
.cabecera--flotando { box-shadow: var(--sombra-flotante); }
.cabecera__fila {
  display: flex; align-items: center; gap: var(--e-4);
  min-height: 72px; flex-wrap: wrap;
}
.marca { text-decoration: none; margin-right: auto; display: inline-flex; align-items: center; gap: var(--e-2); }
.marca__icono {
  display: inline-flex; flex-shrink: 0; gap: 3px;
}
.marca__icono::before,
.marca__icono::after {
  content: ""; display: block; width: 9px; height: 9px; border-radius: 2px;
  transform: rotate(45deg);
}
.marca__icono::before { background: var(--sp-fucsia); }
.marca__icono::after  { background: var(--sp-turquesa); margin-top: 10px; }
.marca__texto {
  font-family: var(--fuente-display);
  font-variation-settings: var(--wonk-display);
  font-size: var(--texto-md); font-weight: 500;
  color: var(--color-texto); letter-spacing: -0.01em;
}
.marca__logo { max-height: 44px; width: auto; }

.menu-boton {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: var(--borde-fino); border-radius: var(--radio-md); cursor: pointer;
}
.menu-boton span { display: block; height: 2px; background: var(--color-texto); border-radius: 2px; }

.menu { display: none; width: 100%; order: 3; }
.menu.abierto { display: block; }
.menu__lista { list-style: none; margin: 0; padding: 0 0 var(--e-4); }
.menu__lista a {
  display: block; padding: var(--e-3) 0; color: var(--color-texto);
  text-decoration: none; border-bottom: var(--borde-fino);
}
.menu__lista a:hover { color: var(--color-accion); }

@media (min-width: 900px) {
  .menu-boton { display: none; }
  .menu { display: block; width: auto; order: 0; }
  .menu__lista { display: flex; gap: var(--e-6); padding: 0; }
  .menu__lista a {
    border: none; padding: var(--e-2) 0; font-size: var(--texto-sm);
    background-image: linear-gradient(var(--color-accion), var(--color-accion));
    background-repeat: no-repeat; background-position: left bottom;
    background-size: 0 2px; transition: background-size var(--transicion);
  }
  .menu__lista a:hover { background-size: 100% 2px; }
}

/* ---------- Aviso flotante: compra directo de fabrica (portada) ---------- */
.aviso-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: var(--e-4);
}
.aviso-modal[hidden] { display: none; }
.aviso-modal__fondo { position: absolute; inset: 0; background: rgba(42, 32, 24, 0.6); }
.aviso-modal__caja {
  position: relative; width: 100%; max-width: 420px; overflow: hidden;
  background: linear-gradient(160deg, var(--sp-vino), var(--sp-fucsia));
  color: var(--sp-blanco); border-radius: var(--radio-lg);
  padding: 0 var(--e-6) var(--e-6);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  animation: aviso-modal-entrada var(--transicion) ease-out;
}
/* Textura de tejido de canasta: dos tramas cruzadas a 45 grados, muy sutiles. */
.aviso-modal__tejido {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.07) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 9px);
}
.aviso-modal__caja .franja-rombos { position: relative; margin: 0 calc(-1 * var(--e-6)) var(--e-6); }
.aviso-modal__eyebrow {
  position: relative;
  font-family: var(--fuente-datos); font-size: var(--texto-xs);
  letter-spacing: 0.08em; color: var(--sp-maiz-tenue); margin: 0 0 var(--e-2);
}
.aviso-modal__titulo {
  position: relative; color: var(--sp-blanco); margin: 0 0 var(--e-2);
  font-size: var(--texto-xl);
}
.aviso-modal__subtitulo {
  position: relative; margin: 0 0 var(--e-4);
  font-size: var(--texto-base); color: rgba(255, 255, 255, 0.85);
}
.aviso-modal__lista {
  position: relative; list-style: none; margin: 0 0 var(--e-6); padding: 0;
  display: grid; gap: var(--e-3);
}
.aviso-modal__lista li {
  position: relative; padding-left: var(--e-4);
  font-size: var(--texto-base); line-height: var(--interlinea-normal);
}
.aviso-modal__lista li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--sp-maiz); transform: rotate(45deg);
}
.aviso-modal__cerrar {
  position: absolute; top: var(--e-4); right: var(--e-4); z-index: 1;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.15); color: var(--sp-blanco);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.aviso-modal__cerrar:hover { background: rgba(255, 255, 255, 0.28); }
.aviso-modal__boton {
  position: relative; background: var(--sp-blanco); color: var(--sp-vino); width: 100%;
}
.aviso-modal__boton:hover { background: var(--sp-hueso); }

@keyframes aviso-modal-entrada {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Portada ---------- */
.hero { background: var(--color-superficie); padding: var(--e-12) 0 0; }
.hero__interior { max-width: 720px; }
.hero__eyebrow {
  font-family: var(--fuente-datos); font-size: var(--texto-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accion); margin: 0 0 var(--e-3);
}
.hero__titulo { font-size: var(--texto-2xl); margin: 0 0 var(--e-4); }
.hero__bajada { font-size: var(--texto-md); color: var(--color-texto-suave); margin: 0 0 var(--e-6); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); padding-bottom: var(--e-12); }
.hero__imagen img { width: 100%; height: auto; object-fit: cover; max-height: 520px; }

@media (min-width: 768px) {
  .hero__titulo { font-size: var(--texto-3xl); }
}

/* ---------- Secciones ---------- */
.seccion { padding: var(--e-12) 0; }
.seccion--tenue { background: var(--color-superficie); }
.seccion__encabezado { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); }
.seccion__titulo { margin: 0 0 var(--e-6); }
.seccion__enlace { font-size: var(--texto-sm); white-space: nowrap; }

.pagina { padding: var(--e-8) 0 var(--e-16); }
.pagina__encabezado { margin-bottom: var(--e-6); }
.pagina__bajada { color: var(--color-texto-suave); max-width: 60ch; }

.migas { font-size: var(--texto-sm); color: var(--color-texto-tenue); margin-bottom: var(--e-4); }
.migas a { color: var(--color-texto-suave); }

/* ---------- Rejilla de productos ---------- */
.productos-grid {
  display: grid; gap: var(--e-6);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.tarjeta {
  background: var(--color-superficie);
  border-radius: var(--radio-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-flotante); }
.tarjeta--agotado { opacity: 0.75; }
.tarjeta__enlace { text-decoration: none; color: inherit; display: block; }
.tarjeta__imagen { position: relative; aspect-ratio: 1 / 1; background: var(--color-fondo); }
.tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__sin-imagen { width: 100%; height: 100%; background: var(--color-fondo); }
.tarjeta__etiquetas { position: absolute; top: var(--e-3); left: var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-1); }
.tarjeta__cuerpo { padding: var(--e-4); flex: 1; }
.tarjeta__categoria {
  font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-texto-tenue); margin: 0 0 var(--e-1);
}
.tarjeta__nombre { font-size: var(--texto-base); font-family: var(--fuente-cuerpo); font-weight: 500; margin: 0 0 var(--e-2); }
.tarjeta__precio { margin: 0; font-size: var(--texto-md); color: var(--color-texto); }
.tarjeta__antes { font-size: var(--texto-sm); color: var(--color-texto-tenue); margin-left: var(--e-2); }
.tarjeta__wa { margin: 0 var(--e-4) var(--e-4); font-size: var(--texto-sm); min-height: 42px; }

.etiqueta {
  display: inline-block; padding: 2px var(--e-2); border-radius: var(--radio-pill);
  font-size: var(--texto-xs); font-weight: 700; line-height: 1.6;
}
.etiqueta--oferta { background: var(--color-accion); color: var(--sp-blanco); }
.etiqueta--nuevo { background: var(--sp-turquesa-tenue); color: var(--sp-turquesa); }
.etiqueta--pedido { background: var(--sp-maiz-tenue); color: var(--sp-tierra); }
.etiqueta--disponible { background: var(--sp-verde-tenue); color: var(--sp-verde); }
.etiqueta--agotado { background: var(--color-borde); color: var(--color-texto-suave); }

/* ---------- Categorias ---------- */
.categorias-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.categoria-tarjeta {
  display: block; background: var(--color-superficie); border-radius: var(--radio-lg);
  overflow: hidden; text-decoration: none; color: inherit; padding-bottom: var(--e-4);
}
.categoria-tarjeta img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.categoria-tarjeta__nombre { display: block; padding: var(--e-4) var(--e-4) 0; font-weight: 500; }
.categoria-tarjeta__conteo { display: block; padding: 0 var(--e-4); font-size: var(--texto-sm); color: var(--color-texto-tenue); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); padding: 0; margin: 0 0 var(--e-6); }
.chip {
  display: inline-block; padding: var(--e-2) var(--e-4); border-radius: var(--radio-pill);
  background: var(--color-superficie); text-decoration: none; color: var(--color-texto); font-size: var(--texto-sm);
}
.chip:hover { background: var(--sp-fucsia-tenue); color: var(--color-accion); }

.orden { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-6); font-size: var(--texto-sm); }
.orden select { padding: var(--e-2) var(--e-3); border: var(--borde-fino); border-radius: var(--radio-md); background: var(--color-superficie); font: inherit; }

/* ---------- Ficha de producto ---------- */
.ficha { display: grid; gap: var(--e-8); }
@media (min-width: 900px) { .ficha { grid-template-columns: 1.1fr 1fr; gap: var(--e-12); } }

.ficha__imagen { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio-lg); background: var(--color-superficie); }
.ficha__miniaturas { list-style: none; display: flex; gap: var(--e-2); padding: var(--e-3) 0 0; margin: 0; overflow-x: auto; }
.miniatura { padding: 0; border: 2px solid transparent; border-radius: var(--radio-md); background: none; cursor: pointer; line-height: 0; }
.miniatura:hover, .miniatura[aria-current="true"] { border-color: var(--color-accion); }
.miniatura img { width: 72px; height: 72px; object-fit: cover; border-radius: calc(var(--radio-md) - 2px); }

.ficha__categoria { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-texto-tenue); margin: 0; }
.ficha__nombre { margin: var(--e-2) 0; }
.ficha__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-3); margin: var(--e-4) 0; }
.ficha__precio-vigente { font-size: var(--texto-xl); color: var(--color-accion); }
.ficha__precio-antes { color: var(--color-texto-tenue); }
.ficha__promo { color: var(--color-accion); font-weight: 500; margin: 0 0 var(--e-4); }
.ficha__resumen { color: var(--color-texto-suave); }
.ficha__estado { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); font-size: var(--texto-sm); color: var(--color-texto-suave); }
.ficha__wa { width: 100%; margin: var(--e-6) 0; }

.ficha__detalles { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); margin: 0; padding-top: var(--e-4); border-top: var(--borde-fino); font-size: var(--texto-sm); }
.ficha__detalles dt { color: var(--color-texto-tenue); }
.ficha__detalles dd { margin: 0; }

.variantes { margin: var(--e-6) 0; }
.variantes__titulo { font-weight: 500; margin: 0 0 var(--e-3); }
.variantes__lista { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); padding: 0; margin: 0; }
.variante {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4); border: var(--borde-fino); border-radius: var(--radio-pill);
  text-decoration: none; color: var(--color-texto); font-size: var(--texto-sm); background: var(--color-superficie);
}
.variante:hover { border-color: var(--color-accion); color: var(--color-accion); }
.variante__color { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--color-borde); }
.variante__agotada { font-size: var(--texto-xs); color: var(--color-texto-tenue); }
.variantes__nota { font-size: var(--texto-sm); color: var(--color-texto-tenue); margin: var(--e-3) 0 0; }

.bloque { margin: var(--e-12) 0; max-width: 70ch; }
.bloque h2 { font-size: var(--texto-lg); }
.bloque--cultural { border-left: 3px solid var(--color-accion); border-radius: 0; padding-left: var(--e-6); }
.bloque--cultural p { font-family: var(--fuente-display); font-variation-settings: var(--wonk-display); font-size: var(--texto-md); line-height: 1.5; }

/* ---------- Artesanos, historias, testimonios ---------- */
.artesanos-grid, .artesanos-lista, .articulos-grid, .testimonios { list-style: none; padding: 0; margin: 0; }
.artesanos-grid { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.artesano-tarjeta a { text-decoration: none; color: inherit; }
.artesano-tarjeta img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio-lg); }
.artesano-tarjeta h2 { font-size: var(--texto-base); margin: var(--e-3) 0 var(--e-1); }
.artesano-tarjeta__especialidad { font-size: var(--texto-sm); color: var(--color-accion); margin: 0; }
.artesano-tarjeta__lugar { font-size: var(--texto-sm); color: var(--color-texto-tenue); margin: 0; }

.artesanos-lista { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.artesanos-lista a { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: inherit; }
.artesanos-lista img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

.perfil { display: grid; gap: var(--e-6); }
@media (min-width: 768px) { .perfil { grid-template-columns: 280px 1fr; } }
.perfil__foto { width: 100%; border-radius: var(--radio-lg); object-fit: cover; }
.perfil__especialidad { color: var(--color-accion); }
.perfil__datos { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); font-size: var(--texto-sm); }
.perfil__datos dt { color: var(--color-texto-tenue); }
.perfil__datos dd { margin: 0; }

.articulos-grid { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.articulo-tarjeta a { text-decoration: none; color: inherit; }
.articulo-tarjeta img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radio-lg); }
.articulo-tarjeta h2, .articulo-tarjeta h3 { font-size: var(--texto-base); margin: var(--e-3) 0 var(--e-1); }
.articulo-tarjeta p { font-size: var(--texto-sm); color: var(--color-texto-suave); margin: 0; }

.articulo { max-width: 72ch; }
.articulo__resumen { font-size: var(--texto-md); color: var(--color-texto-suave); }
.articulo__meta { font-size: var(--texto-sm); color: var(--color-texto-tenue); }
.articulo__portada { width: 100%; border-radius: var(--radio-lg); margin: var(--e-6) 0; }
.articulo__cuerpo { line-height: 1.8; }
.articulo__fuente { font-size: var(--texto-sm); color: var(--color-texto-tenue); }

.testimonios { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.testimonio { background: var(--color-superficie); padding: var(--e-6); border-radius: var(--radio-lg); }
.testimonio blockquote { margin: 0; font-family: var(--fuente-display); font-variation-settings: var(--wonk-display); }
.testimonio__autor { font-size: var(--texto-sm); color: var(--color-texto-tenue); margin: var(--e-3) 0 0; }

.historia { max-width: 70ch; }
.historia__bajada { color: var(--color-accion); }
.historia__texto { line-height: 1.8; }

/* ---------- Contacto ---------- */
.contacto { display: grid; gap: var(--e-12); }
@media (min-width: 900px) { .contacto { grid-template-columns: 1fr 1fr; } }
.contacto__lista { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); font-size: var(--texto-sm); margin: var(--e-6) 0; }
.contacto__lista dt { color: var(--color-texto-tenue); }
.contacto__lista dd { margin: 0; }

.mapa { position: relative; border-radius: var(--radio-lg); overflow: hidden; }
.mapa iframe { width: 100%; height: 320px; border: 0; display: block; }
.mapa__enlace { display: inline-block; margin-top: var(--e-3); font-size: var(--texto-sm); }

.campo { margin-bottom: var(--e-4); }
.campo label { display: block; font-size: var(--texto-sm); margin-bottom: var(--e-1); color: var(--color-texto-suave); }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: var(--e-3); font: inherit;
  border: var(--borde-fino); border-radius: var(--radio-md); background: var(--color-superficie); color: var(--color-texto);
}
.campo input:focus, .campo textarea:focus { border-color: var(--color-accion); }
.trampa { position: absolute; left: -9999px; }

.aviso { padding: var(--e-4); border-radius: var(--radio-md); margin-bottom: var(--e-6); }
.aviso--exito { background: var(--sp-verde-tenue); color: var(--sp-verde); }
.aviso--error { background: var(--sp-fucsia-tenue); color: var(--sp-vino); list-style-position: inside; }

.vacio { text-align: center; padding: var(--e-16) 0; }
.vacio p { color: var(--color-texto-suave); }

/* ---------- Pie ---------- */
.pie { background: var(--color-superficie); margin-top: var(--e-16); }
.pie__grid { display: grid; gap: var(--e-8); padding-top: var(--e-12); padding-bottom: var(--e-8); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pie__titulo { font-size: var(--texto-base); font-family: var(--fuente-cuerpo); font-weight: 700; margin: 0 0 var(--e-3); }
.pie__lista, .pie__redes { list-style: none; padding: 0; margin: 0; }
.pie__lista a, .pie__redes a { display: block; padding: var(--e-1) 0; color: var(--color-texto-suave); text-decoration: none; font-size: var(--texto-sm); }
.pie__lista a:hover, .pie__redes a:hover { color: var(--color-accion); }
.pie__redes { display: flex; gap: var(--e-4); margin-top: var(--e-4); }
.pie__dato { font-size: var(--texto-sm); color: var(--color-texto-suave); margin: var(--e-2) 0; }
.pie__legal { border-top: var(--borde-fino); padding-top: var(--e-4); padding-bottom: var(--e-8); font-size: var(--texto-sm); color: var(--color-texto-tenue); }

/* ---------- Boton flotante de WhatsApp: fijo en la esquina, igual en mobil y escritorio ---------- */
.wa-flotante {
  position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-accion); color: var(--color-sobre-accion);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--texto-md); text-decoration: none;
  box-shadow: var(--sombra-flotante);
}
.wa-flotante:hover { background: var(--color-accion-hover); }

/* ---------- Paginacion ---------- */
.paginacion { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-8); }
.paginacion a {
  display: inline-block; min-width: 44px; padding: var(--e-2); text-align: center;
  background: var(--color-superficie); border-radius: var(--radio-md);
  text-decoration: none; color: var(--color-texto); font-size: var(--texto-sm);
}
.paginacion a:hover { background: var(--sp-fucsia-tenue); color: var(--color-accion); }
.paginacion a.activo { background: var(--color-accion); color: var(--sp-blanco); font-weight: 700; }