/* ==========================================================================
   Franja "Tienda Piruli" del inicio (Marina, 7-oct-2026, mockup 94555,
   ticket 291820). Marcado en Pages/Shared/_TiendaPiruli.cshtml. Va dos veces:
   dentro de la tarjeta del banner (.pt-tienda--banner) y después de las
   tarjetas de áreas (.pt-tienda--areas). Verde de la paleta oficial (#7BBC75)
   en pastel de fondo y en tono profundo para letra y botón.
   ========================================================================== */
.pt-tienda {
  --pt-verde: #3A8A4B;
  --pt-verde-btn: #2F7D46;
  --pt-fondo: #EAF4E3;
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.8vw, 1.5rem);
  background: var(--pt-fondo);
  border-radius: 26px;
  padding: .55rem clamp(1rem, 2vw, 1.6rem) .55rem clamp(2.2rem, 4vw, 3.4rem);
}
.pt-tienda p { margin: 0; }

/* Logo original de la Tiendita (pajarito con bolsas + nombre), con la raya
   divisoria que antes llevaba el nombre escrito. */
.pt-tienda-logo {
  flex: none; display: block; line-height: 0;
  padding-right: clamp(.9rem, 2vw, 1.6rem); border-right: 2px solid #CFE3C8;
}
.pt-tienda-logo img { display: block; height: clamp(58px, 6vw, 76px); width: auto; }

.pt-tienda-texto { flex: 1 1 auto; min-width: 0; }
.pt-tienda-lema {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.1;
  color: var(--pt-verde);
}
.pt-tienda-sub { font-family: var(--font-body); font-size: .8rem; line-height: 1.35; color: var(--brand-ink); margin-top: .3rem !important; }

.pt-tienda-cosas { position: relative; flex: none; display: flex; align-items: flex-end; gap: .2rem; }
.pt-tienda-cosas img { width: auto; display: block; }
.pt-tienda-cosas img:nth-of-type(1) { height: 64px; }
.pt-tienda-cosas img:nth-of-type(2) { height: 78px; }
.pt-tienda-cosas img:nth-of-type(3) { height: 54px; }

.pt-tienda-btn {
  flex: none;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .98rem;
  color: #fff;
  background: var(--pt-verde-btn);
  border-radius: 999px;
  padding: .75rem 1.7rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.pt-tienda-btn:hover, .pt-tienda-btn:focus-visible { color: #fff; transform: translateY(-2px); }
/* El logo lleva a /tiendita sin verse distinto. */
.pt-tienda-enlace { color: inherit; text-decoration: none; }
.pt-tienda-enlace:hover { color: inherit; text-decoration: underline; }

/* Adornos del mockup: rayitas amarillas, rayitas coral y corazón. */
.pt-deco-gotas { --w: 36px; --x: .5rem; --y: 26%; --r: -95deg; }
.pt-deco-gotas-lema { --w: 30px; --xr: -2.2rem; --y: .2rem; --r: 100deg; }
.pt-deco-gotas-cosas { --w: 34px; --x: -2.3rem; --y: .1rem; --r: -40deg; }
.pt-deco-corazon { position: relative !important; display: block; flex: none; --w: 34px; align-self: flex-start; margin-top: .6rem; transform: rotate(-12deg); }
.pt-deco-corazon-izq { --w: 34px; --x: 1.2rem; --y: 30%; --r: -10deg; }
.pt-deco-gotas-fin { --w: 32px; --xr: .3rem; --y: 22%; --r: 80deg; }

/* Segunda franja, después de las áreas: una sola línea de lema y más aire. */
.pt-tienda--areas { margin-top: 1.25rem; padding-left: clamp(2.5rem, 5vw, 4.5rem); padding-right: clamp(1.4rem, 3vw, 2.6rem); }
.pt-tienda--areas .pt-deco-gotas { --x: clamp(2.6rem, 4.6vw, 4.2rem); }
.pt-tienda--areas .pt-tienda-texto { min-width: 15rem; }
.pt-tienda--areas .pt-tienda-btn { padding: .7rem 1.35rem; }
.pt-tienda--areas .pt-tienda-cosas img:nth-of-type(1) { height: 56px; }
.pt-tienda--areas .pt-tienda-cosas img:nth-of-type(2) { height: 68px; }
.pt-tienda--areas .pt-tienda-cosas img:nth-of-type(3) { height: 48px; }

/* Primera franja: dentro de la tarjeta del banner, abajo de las áreas. */
.pt-tienda--banner { margin: .4rem clamp(.6rem, 1.2vw, 1rem) 0; }
/* La tarjeta del banner es más angosta que el mockup (1600 px): se compacta
   todo para que el lema quede en dos renglones como en la imagen. */
.pt-tienda--banner { gap: clamp(.6rem, 1.1vw, 1rem); padding-left: clamp(1.8rem, 3vw, 2.6rem); }
.pt-tienda--banner .pt-tienda-texto { min-width: 15rem; }
.pt-tienda--banner .pt-tienda-cosas img:nth-of-type(1) { height: 54px; }
.pt-tienda--banner .pt-tienda-cosas img:nth-of-type(2) { height: 66px; }
.pt-tienda--banner .pt-tienda-cosas img:nth-of-type(3) { height: 46px; }
.pt-tienda--banner .pt-tienda-btn { padding: .7rem 1.35rem; }

/* "Libros, uniformes, kits de viaje, materiales y más." va en UN SOLO renglón
   en escritorio (Marina, 7-oct). Para que quepa sin achicar esa letra se
   compactan el nombre, los espacios y los dibujos de las dos franjas. */
@media (min-width: 1200px) {
  .pt-tienda-sub { white-space: nowrap; }
  .pt-tienda .pt-tienda-texto { flex: 1 1 auto; min-width: auto; } /* mínimo = el renglón de .pt-tienda-sub */
  .pt-tienda--banner { gap: clamp(.55rem, .75vw, .8rem); }
  .pt-tienda-logo { padding-right: clamp(.8rem, 1.3vw, 1.2rem); }
  .pt-tienda-logo img { height: 62px; }
  .pt-tienda--banner .pt-tienda-cosas img:nth-of-type(1) { height: 48px; }
  .pt-tienda--banner .pt-tienda-cosas img:nth-of-type(2) { height: 60px; }
  .pt-tienda--banner .pt-tienda-cosas img:nth-of-type(3) { height: 42px; }
  .pt-tienda--banner .pt-tienda-btn { padding: .7rem 1.15rem; }
  /* Franja de abajo: el lema también va en un renglón (Marina, 7-oct:
     ningún texto de las franjas de Tienda en dos renglones). */
  .pt-tienda--areas { gap: .75rem; padding-left: clamp(2.4rem, 3.4vw, 3rem); padding-right: 1.6rem; }
  .pt-tienda--areas .pt-tienda-lema { white-space: nowrap; }
  .pt-tienda--areas .pt-deco-gotas-lema { --xr: -1.7rem; --y: -1.1rem; --r: 60deg; }   /* arriba del final, sin tapar el punto */
  .pt-tienda--areas .pt-deco-gotas-cosas { display: none; }   /* ya no cabe sin pisar el lema; quedan las de la orilla */
  .pt-tienda--areas .pt-tienda-cosas img:nth-of-type(1) { height: 48px; }
  .pt-tienda--areas .pt-tienda-cosas img:nth-of-type(2) { height: 58px; }
  .pt-tienda--areas .pt-tienda-cosas img:nth-of-type(3) { height: 42px; }
}
@media (max-width: 1199.98px) {
  .pt-tienda-cosas img:nth-of-type(3) { display: none; }
}
@media (max-width: 1099.98px) {
  .pt-tienda .pt-tienda-texto { min-width: 10rem; }
  .pt-tienda .pt-tienda-cosas img:nth-of-type(2) { display: none; }
}
@media (max-width: 991.98px) {
  .pt-tienda .pt-tienda-texto { min-width: 0; }
  .pt-tienda { flex-wrap: wrap; justify-content: center; text-align: center; padding: 1rem 1.25rem 1.25rem; }
  .pt-tienda-logo { border-right: 0; padding-right: 0; }
  .pt-tienda-texto { flex-basis: 100%; }
  .pt-tienda-lema br { display: none; }
  .pt-tienda-cosas img:nth-of-type(3) { display: block; }
  .pt-deco-gotas, .pt-deco-gotas-cosas, .pt-deco-gotas-lema, .pt-deco-corazon, .pt-deco-corazon-izq { display: none; }
}
@media (max-width: 575.98px) {
  .pt-tienda-logo img { height: 64px; }
  .pt-tienda-cosas { display: none; }
}