/* ==========================================================================
   TURMEON MOTION — Clases de animación

   Uso:
     <div data-tm-reveal="up">        → Scroll reveal hacia arriba
     <div data-tm-reveal="down">      → Scroll reveal hacia abajo
     <div data-tm-reveal="fade">      → Fade in simple
     <div data-tm-reveal="stamp">     → Efecto sello (scale + opacity)
     <div data-tm-reveal="collage-drop"> → Halftone que cae con micro-rotación

     <div data-tm-delay="1">          → Stagger delay 100ms
     <div data-tm-delay="2">          → Stagger delay 200ms
     ...

     <img class="tm-halftone" ...>    → Hover: levanta y rota
     <button class="tm-press" ...>    → Hover: press effect
     <div class="tm-shadow-collapse"> → Hover: shadow desaparece
   ========================================================================== */

/* ==========================================================================
   SCROLL REVEALS — Estados iniciales (antes de ser visibles)
   ========================================================================== */

[data-tm-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

/* Reveal Up: sube desde abajo */
[data-tm-reveal="up"] {
  transform: translateY(var(--tm-dist-reveal));
}

/* Reveal Down: baja desde arriba */
[data-tm-reveal="down"] {
  transform: translateY(calc(var(--tm-dist-reveal) * -1));
}

/* Reveal Fade: solo opacity */
[data-tm-reveal="fade"] {
  transform: none;
}

/* Stamp: efecto sello — escala desde 1.08 */
[data-tm-reveal="stamp"] {
  transform: scale(1.08);
}

/* Collage Drop: halftone que cae con micro-rotación aleatoria
   --tm-rotate se asigna por JS (random entre -3deg y 3deg) */
[data-tm-reveal="collage-drop"] {
  transform: translateY(calc(var(--tm-dist-drop) * -1)) rotate(var(--tm-rotate, 0deg));
}

/* ==========================================================================
   SCROLL REVEALS — Estados visibles (cuando IntersectionObserver activa)
   ========================================================================== */

/* Reveal Up & Down */
[data-tm-reveal="up"].is-visible,
[data-tm-reveal="down"].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform var(--tm-dur-base) var(--tm-ease-out),
    opacity var(--tm-dur-base) var(--tm-ease-out);
}

/* Reveal Fade */
[data-tm-reveal="fade"].is-visible {
  opacity: 1;
  transition: opacity var(--tm-dur-base) var(--tm-ease-out);
}

/* Stamp — easing snap para impacto seco */
[data-tm-reveal="stamp"].is-visible {
  opacity: 1;
  transform: scale(1);
  transition:
    transform var(--tm-dur-slow) var(--tm-ease-snap),
    opacity var(--tm-dur-slow) var(--tm-ease-snap);
}

/* Collage Drop — easing drop (gravedad) + rotación se resuelve a 0° */
[data-tm-reveal="collage-drop"].is-visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
  transition:
    transform var(--tm-dur-base) var(--tm-ease-drop),
    opacity var(--tm-dur-base) var(--tm-ease-drop);
}

/* ==========================================================================
   STAGGER DELAYS
   Uso: data-tm-delay="1" a data-tm-delay="5"
   ========================================================================== */

[data-tm-delay="1"] { transition-delay: calc(var(--tm-stagger) * 1); }
[data-tm-delay="2"] { transition-delay: calc(var(--tm-stagger) * 2); }
[data-tm-delay="3"] { transition-delay: calc(var(--tm-stagger) * 3); }
[data-tm-delay="4"] { transition-delay: calc(var(--tm-stagger) * 4); }
[data-tm-delay="5"] { transition-delay: calc(var(--tm-stagger) * 5); }

/* Collage stagger (más lento entre halftones) */
[data-tm-reveal="collage-drop"][data-tm-delay="1"] { transition-delay: calc(var(--tm-stagger-collage) * 1); }
[data-tm-reveal="collage-drop"][data-tm-delay="2"] { transition-delay: calc(var(--tm-stagger-collage) * 2); }
[data-tm-reveal="collage-drop"][data-tm-delay="3"] { transition-delay: calc(var(--tm-stagger-collage) * 3); }
[data-tm-reveal="collage-drop"][data-tm-delay="4"] { transition-delay: calc(var(--tm-stagger-collage) * 4); }
[data-tm-reveal="collage-drop"][data-tm-delay="5"] { transition-delay: calc(var(--tm-stagger-collage) * 5); }
[data-tm-reveal="collage-drop"][data-tm-delay="6"] { transition-delay: calc(var(--tm-stagger-collage) * 6); }
[data-tm-reveal="collage-drop"][data-tm-delay="7"] { transition-delay: calc(var(--tm-stagger-collage) * 7); }
[data-tm-reveal="collage-drop"][data-tm-delay="8"] { transition-delay: calc(var(--tm-stagger-collage) * 8); }

/* ==========================================================================
   HALFTONE ELEMENTS — Hover: levantar recorte de la mesa
   ========================================================================== */

.tm-halftone {
  transition: transform var(--tm-dur-fast) var(--tm-ease-out);
  cursor: default;
}

/* Solo hover en elementos interactivos */
a .tm-halftone,
button .tm-halftone,
.tm-halftone[data-tm-interactive] {
  cursor: pointer;
}

a .tm-halftone:hover,
button .tm-halftone:hover,
.tm-halftone[data-tm-interactive]:hover {
  transform: translateY(var(--tm-dist-lift)) rotate(-1deg);
}

/* ==========================================================================
   BOTONES — Press effect (neobrutalista)
   ========================================================================== */

.tm-press {
  transition:
    transform var(--tm-dur-fast) var(--tm-ease-out),
    box-shadow var(--tm-dur-fast) var(--tm-ease-out);
}

.tm-press:hover {
  transform: translateY(var(--tm-dist-hover));
  box-shadow: var(--tm-shadow-lg);
}

.tm-press:active {
  transform: translateY(var(--tm-dist-active));
  box-shadow: var(--tm-shadow-sm);
}

/* ==========================================================================
   CARDS — Shadow collapse on hover
   ========================================================================== */

.tm-shadow-collapse {
  box-shadow: var(--tm-shadow);
  transition: box-shadow var(--tm-dur-fast) var(--tm-ease-out);
}

.tm-shadow-collapse:hover {
  box-shadow: none;
}

/* ==========================================================================
   COLOR FLASH — Acento instantáneo
   Uso: <span class="tm-color-flash" data-tm-reveal="fade">
   ========================================================================== */

.tm-color-flash.is-visible {
  transition: none; /* Aparece de golpe, sin transición */
  opacity: 1;
}

/* ==========================================================================
   B/N FILTER — Decorativos e ingredientes en blanco y negro
   ========================================================================== */

.cta-img-shaper,
.cta-img-shaper-pu,
.cta-img-shaper-tometo,
.left-hand,
.right-hand {
  filter: grayscale(1) contrast(1.2);
}

/* ==========================================================================
   HEADER BORDER — Override de color de fondo
   ========================================================================== */

.head-border {
  background-color: #f2edea;
}

/* ==========================================================================
   BOX BORDERS — Cerrar cajas neobrutalistas con bordes faltantes
   ========================================================================== */

/* Task 4: about-grid imagen grande — falta borde izquierdo */
.about-grid > .about-grid-img-wrap:first-child {
  border-left: 1px solid var(--zeus);
}

/* Task 5: mid ticker rojo — faltan bordes abajo, izquierda y derecha */
.top-ticker-wrapper.red-bg {
  border-bottom: 1px solid var(--zeus);
  border-left: 1px solid var(--zeus);
  border-right: 1px solid var(--zeus);
}

/* Task 6: about-single-img-box segundo hijo — falta borde derecho */
.about-inner-single > .about-single-img-box:nth-child(2) {
  border-right: 1px solid var(--zeus);
}

/* Task 7: about-single-content verde — falta borde derecho */
.about-inner-single.revas > .about-single-content.defr-color:nth-child(2) {
  border-right: 1px solid var(--zeus);
}

/* ==========================================================================
   SECTION SUBTITLES — Font y gifs de sección
   ========================================================================== */

/* Task 11a: Subtítulos de sección en Gobold (era Permanent Marker) */
.our-pizza-top-title {
  font-family: var(--_font-famaly---tanker-font-family); /* Gobold */
}

/* Task 11c: Tamaño fijo para gifs en subtítulos (ojo con el tamaño) */
.our-pizza-top-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Gif derecho reflejado para simetría */
.our-pizza-top-title-wrap .our-pizza-top-img:last-child {
  transform: scaleX(-1);
}

/* ==========================================================================
   PRODUCT CARDS — Hover en slider de productos
   ========================================================================== */

.slider-item-inner {
  transition: transform var(--tm-dur-fast) var(--tm-ease-out);
}

/* Task 12c: Imagen del producto — tamaño consistente + escala al hover */
.slider-item-inner .price-img {
  width: auto;
  height: 300px;
  min-height: 300px;
  object-fit: contain;
  transition: transform var(--tm-dur-base) var(--tm-ease-out);
}

.slider-item-inner:hover .price-img {
  transform: scale(1.06);
}

/* Task 12a: Shapes decorativos ocultos por defecto, aparecen en hover */
.card-shape-img-wrap {
  pointer-events: none;
}

.card-shape-one,
.card-shape-2 {
  opacity: 0;
  transition: opacity var(--tm-dur-base) var(--tm-ease-out),
              transform var(--tm-dur-base) var(--tm-ease-out);
}

.slider-item-inner:hover .card-shape-one {
  opacity: 0.6;
  transform: translate(-43px, 129px) rotate(3deg);
}

.slider-item-inner:hover .card-shape-2 {
  opacity: 0.6;
  transform: translate(35px, -113px) rotate(-3deg);
}

.card-overlay {
  opacity: 0;
  transform: none;
  transition:
    opacity var(--tm-dur-base) var(--tm-ease-out),
    background-position 1.2s linear;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(32, 30, 29, 0) 0%, rgba(32, 30, 29, 0.08) 100%);
  overflow: hidden;
}

.slider-item-inner:hover .card-overlay {
  opacity: 1;
}

.card-overlay::before,
.card-overlay::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--tm-dur-base) var(--tm-ease-out),
    transform var(--tm-dur-base) var(--tm-ease-out),
    background-position 1.3s linear;
}

.card-overlay::before {
  top: 30%;
  height: 34%;
  background:
    linear-gradient(90deg, rgba(32, 30, 29, 0.78) 0%, rgba(32, 30, 29, 0.68) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(228, 218, 204, 0) 0 8px,
      rgba(228, 218, 204, 0.78) 8px 10px
    );
  background-size: 100% 100%, 24px 100%;
  background-position: 0 0, 0 0;
  mix-blend-mode: multiply;
  transform: translateX(-14px);
}

.card-overlay::after {
  top: 18%;
  bottom: 18%;
  background:
    radial-gradient(circle at 50% 50%, rgba(152, 52, 72, 0.18) 0%, rgba(152, 52, 72, 0) 58%),
    linear-gradient(180deg, rgba(246, 200, 81, 0.08) 0%, rgba(246, 200, 81, 0) 100%);
  transform: scale(0.98);
}

.slider-item-inner:hover .card-overlay::before,
.slider-item-inner:hover .card-overlay::after {
  opacity: 1;
}

.slider-item-inner:hover .card-overlay::before {
  transform: translateX(0);
  background-position: 0 0, 24px 0;
}

.slider-item-inner:hover .card-overlay::after {
  transform: scale(1);
}

/* Nombre y precio del producto siempre visibles sobre overlay */
.price-title-wrapper,
.price-card-inner-flex {
  position: relative;
  z-index: 2;
}

/* Imagen del producto sobre los shapes decorativos */
.price-img-link {
  position: relative;
  z-index: 1;
  transition: transform var(--tm-dur-base) var(--tm-ease-out);
}

.slider-item-inner:hover .price-img-link {
  transform: scale(1.03);
}

/* Shapes decorativos detrás de la imagen */
.card-shape-img-wrap {
  z-index: 0;
}

/* Botón cart cambia estilo */
.cart-price-link,
.price-card-inner {
  transition: background-color var(--tm-dur-fast) var(--tm-ease-out);
}

.slider-item-inner:hover .cart-price-link {
  background-color: rgba(0,0,0,0.05);
}

/* ==========================================================================
   COUNTERS — Sizing para columnas de dígitos (fix overflow)
   ========================================================================== */

/* Altura del contenedor visible — debe coincidir con font-size del dígito */
.count-overflow-heddin {
  height: 80px;
}

.review-count-number-wrap {
  width: 52px;
}

/* Dígitos dentro de columnas */
.review-count-number-wrap .review-count-number {
  text-align: center;
  width: 100%;
}

/* Sufijo (+, %) — flex item directo de review-count-inner, NO expandir */
.review-count-inner > .review-count-number {
  flex: 0 0 auto;
  width: auto;
}

/* Responsive: ajustar width y height con font-size */
@media screen and (max-width: 991px) {
  .count-overflow-heddin { height: 60px; }
  .review-count-number-wrap { width: 39px; }   /* 60px font → ~0.65 ratio */
}
@media screen and (max-width: 767px) {
  .count-overflow-heddin { height: 52px; }
  .review-count-number-wrap { width: 34px; }   /* 52px font */
}
@media screen and (max-width: 479px) {
  .count-overflow-heddin { height: 33px; }
  .review-count-number-wrap { width: 22px; }   /* 33px font */
}

/* Grid 2x2 para los 4 stats juntos */
.review-img-flex--4stats {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

/* Bordes exteriores: cerrar el bloque de stats por abajo y derecha */
.review-img-wrapper {
  border-right: 1px solid var(--zeus);
  border-bottom: 1px solid var(--zeus);
}

/* Bordes entre filas del grid de stats */
.review-img-flex--4stats .review-single:nth-child(n+3) .review-count-single {
  border-top: 1px solid var(--zeus);
}

/* Todos los stats llevan border-left (el wrapper ya tiene border-left,
   pero los stats de la columna izquierda necesitan el suyo propio
   para que la línea sea visible contra su color de fondo) */
.review-img-flex--4stats .review-count-single {
  border-left: 1px solid var(--zeus);
}

@media screen and (max-width: 479px) {
  .review-img-flex--4stats {
    grid-template-columns: 1fr;
  }
  /* En mobile (1 columna), todos excepto el primero llevan border-top */
  .review-img-flex--4stats .review-single:nth-child(n+2) .review-count-single {
    border-top: 1px solid var(--zeus);
  }
}

/* Ticker icon — mismo tamaño que el SVG pizza original (28x28) */
.ticker-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Ticker highlight — "Envío gratis" en rojo vino */
.ticker-highlight {
  color: var(--mahogany);
  font-weight: 700;
}

/* Cerdo del mid ticker — más grande y volteado */
.ticker-icon--flip {
  width: 38px;
  height: 38px;
  transform: scaleX(-1);
}

/* Ovejas encima del botón "Más sobre nosotros" */
.about-ovejas {
  display: flex;
  gap: 8px;
  margin-bottom: -6px;
  position: relative;
  z-index: 1;
}

.about-ovejas .title-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  transform: scaleX(-1);
  margin-bottom: 0;
}

/* Stagger para animación de dígitos */
.review-count-number-wrap._2 { transition-delay: 0.1s; }
.review-count-number-wrap._3 { transition-delay: 0.2s; }
.review-count-number-wrap._4 { transition-delay: 0.3s; }

/* ==========================================================================
   INSTAGRAM TICKER — Hover overlay (reemplaza Webflow IX2)
   ========================================================================== */

/* Overlay de color oculto por defecto */
.instgram-link {
  opacity: 0;
  transition: opacity var(--tm-dur-base) var(--tm-ease-out);
}

/* Mostrar overlay al hacer hover en la imagen */
.menue-ticker-img-box:hover .instgram-link {
  opacity: 0.85;
}