/* /tiendita "muy pronto" (Marige, 10-oct, #291820). Sobre publico-categoria.css:
   aquí sólo el color del área y el encabezado centrado con el logo. */

/* Verde de la Tiendita: las letras del logo (#7BBC75) y la franja del inicio
   (Marige, 10-oct). Tinta = verde de la franja, legible sobre el pastel. */
.pc--tiendita { --pc-tinta: #3A8A4B; --pc-fondo: #EAF4E3; --pc-burbuja: #D6EBCF; }
.pc-hero--tiendita { padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(5rem, 9vw, 7rem); }
.pc-hero--tiendita .pc-burbuja--der { background: #FFE7A6; }

.tt-cuerpo { position: relative; text-align: center; max-width: 820px; }
.tt-logo { display: block; width: clamp(280px, 44vw, 560px); height: auto; margin: 0 auto clamp(1.2rem, 2.4vw, 1.8rem); }
.tt-titulo { display: table; margin: 0 auto .5rem; font-size: clamp(2.6rem, 5.4vw, 4.2rem); }
.pc--tiendita .pc-frase { max-width: 22ch; }
.tt-btn { display: inline-flex; align-items: center; gap: .55rem; }
.tt-corazon { right: 6%; bottom: 8%; color: #F0735F; }

/* Confeti de colores de marca repartido por el encabezado. */
.tt-confeti { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--c); pointer-events: none; }
.tt-c-amarillo { --c: #F5B81C; } .tt-c-coral { --c: #F0735F; } .tt-c-verde { --c: #7BBC75; }
.tt-c-azul { --c: #5986C6; }     .tt-c-rosa { --c: #F4A6A9; }  .tt-c-naranja { --c: #FF9756; }
.tt-confeti--1, .tt-confeti--3, .tt-confeti--5, .tt-confeti--7, .tt-confeti--9 { width: 8px; height: 20px; border-radius: 4px; }
.tt-confeti--0 { left: 14%; top: 18%; }
.tt-confeti--1 { left: 20%; top: 9%; transform: rotate(-30deg); }
.tt-confeti--2 { right: 18%; top: 12%; }
.tt-confeti--3 { right: 12%; top: 30%; transform: rotate(35deg); }
.tt-confeti--4 { left: 9%; top: 46%; width: 10px; height: 10px; }
.tt-confeti--5 { right: 9%; top: 56%; transform: rotate(-20deg); }
.tt-confeti--6 { left: 16%; top: 74%; width: 11px; height: 11px; }
.tt-confeti--7 { right: 20%; top: 80%; transform: rotate(50deg); }
.tt-confeti--8 { right: 28%; top: 5%; width: 9px; height: 9px; }
.tt-confeti--9 { left: 24%; top: 58%; transform: rotate(15deg); }

@media (max-width: 575.98px) {
  /* En celular el logo ocupa todo el ancho: el confeti se le encimaría. */
  .tt-confeti { display: none; }
  .pc-hero--tiendita .pc-burbuja--der { top: auto; bottom: 18%; }
  .tt-corazon { display: none; }
}