/* Toldos de Feria Regenera: decoracion de cada puesto (empresa) y de sus ventanas (productos).
   Solo clases: la CSP del hub (style-src 'self') no admite estilos en linea.
   Uso:  <div class="toldo t-rayas p-vino" aria-hidden="true"></div>
   Un patron (t-*) y una paleta (p-*) por puesto; se guardan como dos claves en la empresa.
   El toldo es decoracion: no lleva texto ni informacion. */

.toldo {
  --c1: #a3314f; --c2: #f3ead6;
  --lona: 44px; --faldon: 16px;
  position: relative;
  height: calc(var(--lona) + var(--faldon));
  pointer-events: none;
}
.toldo::before,
.toldo::after { content: ""; position: absolute; left: 0; right: 0; }
.toldo::before { top: 0; height: var(--lona); }
.toldo::after  { top: var(--lona); height: var(--faldon); }

/* Paletas: los colores de la página de Feria Regenera y los del toldo de referencia */
.p-coral     { --c1: #ef5f64; --c2: #f6efe2; }
.p-oro       { --c1: #fbc05b; --c2: #fff1cf; }
.p-hoja      { --c1: #1ca577; --c2: #d4f0e4; }
.p-marino    { --c1: #163250; --c2: #6580b7; }
.p-lima-rosa { --c1: #c4cf3a; --c2: #e86fa6; }

/* Rayas con festón: cada semicirculo toma el color de su raya */
.t-rayas { --raya: 24px; }
.t-rayas::before {
  background: repeating-linear-gradient(90deg, var(--c1) 0 var(--raya), var(--c2) var(--raya) calc(var(--raya) * 2));
}
.t-rayas::after {
  background:
    radial-gradient(circle at 12px 0, var(--c1) 11.5px, transparent 12px) 0 0 / 48px var(--faldon) repeat-x,
    radial-gradient(circle at 36px 0, var(--c2) 11.5px, transparent 12px) 0 0 / 48px var(--faldon) repeat-x;
}

/* Lona lisa con banderines (como el toldo lima con rosa) */
.t-banderines::before { background: var(--c1); }
.t-banderines::after {
  background:
    linear-gradient(to bottom left,  var(--c2) 50%, transparent 50%) 0 0    / 22px 24px repeat-x,
    linear-gradient(to bottom right, var(--c2) 50%, transparent 50%) 22px 0 / 22px 24px repeat-x;
  height: 24px;
}

/* Cuadros */
.t-cuadros::before {
  background: conic-gradient(var(--c1) 25%, var(--c2) 0 50%, var(--c1) 0 75%, var(--c2) 0) 0 0 / 32px 32px;
}
.t-cuadros::after { background: var(--c1); height: 6px; }

/* Liso con borde recto */
.t-liso::before { background: var(--c1); }
.t-liso::after  { background: var(--c2); height: 6px; }

/* Ventana de producto: toldo arriba, contenido en fondo liso con buen contraste */
.ventana {
  display: flex; flex-direction: column;
  background: #ffffff; color: #1c1c1c;
  border-radius: 14px; overflow: hidden;
  min-width: 0;
}
.ventana-cuerpo { padding: 14px 16px 16px; display: grid; gap: 4px; }
.ventana-cuerpo h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.ventana-cuerpo .vend { font-size: .85rem; color: #4a4a4a; }
.ventana-cuerpo .precio { font-weight: 700; font-size: 1.1rem; margin-top: 6px; }

@media (max-width: 480px) {
  .toldo { --lona: 32px; --faldon: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ventana { transition: transform .2s ease; }
  .ventana:hover { transform: translateY(-3px); }
}