/* =========================================================
   ANIMAL FOOD · CELULAR
   1) Rendimiento: en pantallas táctiles se apagan los efectos que más cuestan
      (manchas con desenfoque, emojis que suben, vidrio esmerilado, textura de
      grano, rayos que giran…). Así el scroll va fluido.
   2) Portada y tienda en celular: menos texto, bloques que caben en pantalla y
      productos en cuadrícula de 2 (sin scroll horizontal).
   Se carga al final para tener la última palabra.
   ========================================================= */

/* ================= 1 · Rendimiento en pantallas táctiles ================= */
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
	:root { --af-grano: none; }

	/* Manchas de luz con desenfoque (lo más pesado) y anillos de fondo */
	.af-sec::before, .af-sec::after,
	.af-sec--azulf::after { display: none !important; animation: none !important; }

	/* Emojis que suben por detrás */
	.af-flotan, .af-burbujas, .af-tcab .af-burbujas { display: none !important; }

	/* Vidrio esmerilado */
	*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
	.af-header-fijo [data-row] { background: #fff !important; }

	/* Solo se apagan las animaciones que repintan toda la pantalla; las que mueven
	   o giran cosas (emojis, órbitas, aros, píldoras, perrito…) se quedan, porque
	   el celular las hace en la tarjeta gráfica sin costo. */
	.af-btn::after { display: none !important; animation: none !important; } /* destello: mueve "left" */
	.af-btn--primario { animation: none !important; }                       /* sombra que late */
	.af-pc__escena::before, .af-pc__orbita, .af-pc__orbita i,
	[class*="__aro"], .af-guia__orbita, .af-qv__texto { will-change: transform; }

	/* Sin efecto 3D al tocar */
	.af-tilt:hover { transform: none !important; }
	.af-tilt::after { display: none !important; }
}

/* ================= 2 · Todo el sitio en celular: aire y tamaños ================= */
@media (max-width: 760px) {
	/* Secciones con aire suficiente, sin cosas pegadas */
	.af-sec { padding-block: 48px !important; }
	.af-head { margin-bottom: 24px !important; }
	.af-kicker { margin-bottom: 12px !important; }
	.af-h2 { font-size: clamp(1.65rem, 7.4vw, 2.05rem) !important; line-height: 1.12 !important; margin-bottom: 12px !important; }
	.af-head .af-lead { font-size: .94rem !important; line-height: 1.55 !important; margin-bottom: 0 !important; }
	.af-lead { font-size: .96rem !important; line-height: 1.6 !important; }

	/* Botones: lado a lado cuando son dos, con espacio entre ellos */
	.af-btns { gap: 10px !important; }
	.af-btns--c { display: grid !important; grid-template-columns: 1fr 1fr; }
	.af-btns--c > :only-child { grid-column: 1 / -1; }
	.af-btns .af-btn { padding: 14px 12px !important; font-size: .88rem !important; justify-content: center; text-align: center; line-height: 1.2 !important; }
	.af-btns--c + *, * + .af-btns--c { margin-top: 20px; }

	/* Encabezados de páginas internas (Tips, Quiénes, Beneficios, Contacto, Recetas) */
	.af-thero, .af-qhero, .af-bhero, .af-chero, .af-phero { padding-top: 30px !important; padding-bottom: 76px !important; }
	.af-thero__grid, .af-qhero__grid, .af-bhero__grid, .af-chero__grid { gap: 26px !important; }
	.af-thero__t, .af-qhero__t, .af-bhero__t, .af-chero__t { margin-bottom: 14px !important; }
	.af-thero__p, .af-qhero__p, .af-bhero__p, .af-chero__p { margin-bottom: 20px !important; }

	/* Listas de tarjetas: separación pareja */
	.af-cards3, .af-beneficios, .af-tv__grid, .af-be__grid, .af-qv__lista, .af-qp__ruta, .af-cq__grid, .af-faq { gap: 12px !important; }
}

/* ================= 2b · Portada en celular ================= */
@media (max-width: 760px) {
	/* Hero: se queda la imagen con los ingredientes alrededor (lo que la hace única),
	   arriba y más chica; el producto recomendado no se muestra en celular */
	.af-hero { min-height: 0 !important; padding: 18px 0 74px !important; }
	.af-hero__grid { display: flex !important; flex-direction: column; gap: 6px !important; }
	.af-hero__media { order: -1; display: block !important; width: min(78vw, 300px) !important; max-width: none !important; margin: 0 auto !important; }
	.af-hero .af-hd, .af-hero__sellos, .af-hero .af-deco { display: none !important; }
	.af-hero .af-ingflot span { font-size: .72rem !important; padding: 6px 10px !important; }
	.af-hero .af-sticker { width: 66px !important; height: 66px !important; font-size: 1.1rem !important; right: 0 !important; top: 2% !important; }
	.af-hero .af-sticker small { font-size: .55rem !important; }
	.af-hero__txt { text-align: center; }
	.af-hero .af-kicker { font-size: .66rem !important; padding: 6px 12px !important; }
	.af-hero__t { font-size: clamp(2rem, 9.4vw, 2.5rem) !important; line-height: 1.04 !important; margin-bottom: 12px !important; }
	.af-hero .af-lead { font-size: .94rem !important; margin-bottom: 18px !important; }
	.af-hero .af-btns { display: grid !important; grid-template-columns: 1fr 1fr; }

	/* Tienda: cuadrícula de 2, sin scroll horizontal */
	.af-pt .af-head .af-lead { display: none !important; }
	.af-pt .af-carril__pista {
		display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px !important; overflow: visible !important;
		scroll-snap-type: none !important; padding: 4px 0 !important; margin: 0 !important;
	}
	.af-pt .af-carril__pista > .af-pc { flex: none !important; width: auto !important; }
	.af-pt .af-carril__pista > .af-pc:nth-child(n+5) { display: none !important; }
	.af-pt .af-flecha { display: none !important; }
	.af-pt__pie { margin-top: 20px !important; }

	/* Cómo pedir */
	.af-cp__pasos { gap: 14px !important; }
	.af-cp__pasos::before { display: none !important; }
	.af-cp__paso:not(:last-child)::after { bottom: -15px !important; }
	.af-cp__paso p { font-size: .8rem !important; line-height: 1.45 !important; }
	.af-cp__envio { margin-top: 18px !important; }
	.af-cp__envio li:nth-child(n+3) { display: none !important; }

	/* ¿Por qué Animal Food?: video + razones cortas */
	.af-pq__cuerpo--video { gap: 18px !important; margin-bottom: 4px !important; }
	.af-vtv__caps { margin-top: 14px !important; }
	.af-pq__cuerpo--video .af-pq__grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
	.af-pq__cuerpo--video .af-pq__item { flex-direction: row !important; align-items: center !important; gap: 8px !important; padding: 10px 8px !important; border-radius: 14px !important; }
	.af-pq__cuerpo--video .af-pq__ico { width: 34px !important; height: 34px !important; font-size: 1rem !important; border-radius: 10px !important; }
	.af-pq__cuerpo--video .af-pq__item h3 { font-size: .86rem !important; line-height: 1.15 !important; margin: 0 !important; }
	.af-pq__cuerpo--video .af-pq__item p { display: none !important; }
	.af-vtv__marco { transform: none !important; box-shadow: 0 0 0 3px var(--af-naranja), 0 10px 16px -12px rgba(15, 35, 80, .45) !important; border-width: 5px !important; }
	.af-vtv__etq { box-shadow: none !important; }
	.af-vtv__bola { box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .45) !important; }
	.af-vtv::before { display: none; }

	/* Recetas en slider */
	#recetas .af-bar { margin-bottom: 16px !important; }
	#recetas .af-bar__txt .af-lead { display: none !important; }
	/* Controles del slider pensados para el dedo: contador + flechas grandes */
	#recetas .af-bar { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 12px !important; }
	#recetas .af-bar__acc { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
	#recetas .af-rsl__cont { font-family: var(--af-f-titulo); font-size: 1.1rem; color: rgba(255, 255, 255, .8); margin-right: auto; }
	#recetas .af-rsl__cont b { font-weight: 400; color: var(--af-naranja); font-size: 1.4rem; }
	#recetas .af-bar__acc .af-flecha { width: 46px !important; height: 46px !important; }
	/* Selector de recetas: 5 botones iguales, sin scroll de lado */
	#recetas .af-rsl__thumbs { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 6px !important; overflow: visible !important; padding: 0 !important; }
	#recetas .af-rsl__thumbs button { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0 !important; width: 100% !important; padding: 8px 2px 10px !important; border-radius: 16px !important; position: relative; overflow: hidden; }
	#recetas .af-rsl__th-n { display: none !important; }
	#recetas .af-rsl__th-em { width: 34px !important; height: 34px !important; font-size: 1.15rem !important; margin: 0 !important; }
	#recetas .af-rsl__thumbs button.is-on { transform: translateY(-2px); }
	#recetas .af-rsl__th-bar { left: 8px !important; right: 8px !important; bottom: 4px !important; }
	#recetas .af-rsl__foto { aspect-ratio: 16 / 9 !important; height: auto !important; max-height: 210px !important; }
	#recetas .af-rsl__foto img { height: 100% !important; object-fit: cover !important; }
	#recetas .af-rsl__info { padding-top: 14px !important; }
	#recetas .af-rsl__puntos { display: none !important; }
	#recetas .af-rsl__t { font-size: 1.6rem !important; margin: 10px 0 8px !important; }
	#recetas .af-rsl__desc { font-size: .9rem !important; margin-bottom: 12px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	#recetas .af-rsl__precio { margin-bottom: 14px !important; }
	#recetas .af-rsl__info .af-btns { display: grid !important; grid-template-columns: 1fr 1fr; }
	#recetas .af-rsl__thumbs { margin-top: 18px !important; }
	/* El slide que sale no se encima con el que entra */
	#recetas .af-rsl__slide:not(.is-on) { visibility: hidden !important; }

	/* Guía de porciones */
	#porciones .af-head .af-lead { display: none !important; }
	.af-guia[data-guia] .af-guia__especie { margin-bottom: 14px !important; }
	.af-guia[data-guia] .af-guia__esp { padding: 7px 8px !important; font-size: 1.05rem !important; }
	.af-guia[data-guia] .af-guia__esp-em { font-size: 1.3rem !important; }
	.af-guia[data-guia] .af-guia__grid { row-gap: 16px !important; }
	.af-guia[data-guia] .af-guia__barra, .af-guia[data-guia] .af-guia__tip { display: none !important; }
	.af-guia[data-guia] .af-guia__sub { margin: 4px 0 8px !important; }
	.af-guia[data-guia] .af-guia__reco { margin-bottom: 10px !important; }
	.af-guia[data-guia] .af-guia__actividad { margin-top: 12px !important; }
	.af-guia[data-guia] .af-guia__chip-em { font-size: 1.1rem !important; }
	.af-guia::before { display: none !important; }
}

/* ================= 3 · Tarjeta de producto en celular (portada y tienda): 2 por fila, con su vida ================= */
@media (max-width: 760px) {
	.af-pt .af-pc,
	.af-store .af-cat__lista-prod .af-pc { flex-direction: column !important; border-radius: 22px !important; }
	.af-pt .af-pc__escena,
	.af-store .af-cat__lista-prod .af-pc__escena { flex: none !important; aspect-ratio: 1 / .92 !important; min-height: 0 !important; }
	.af-pt .af-pc__plato,
	.af-store .af-cat__lista-prod .af-pc__plato { width: 68% !important; border-width: 4px !important; box-shadow: 0 0 0 6px rgba(255, 255, 255, .38), 0 0 0 12px rgba(255, 255, 255, .14), 0 14px 18px -10px rgba(15, 35, 80, .6) !important; }
	/* Órbita con el ingrediente girando alrededor del plato */
	.af-pt .af-pc__orbita,
	.af-store .af-cat__lista-prod .af-pc__orbita { display: block !important; inset: 7% !important; }
	.af-pt .af-pc__orbita i,
	.af-store .af-cat__lista-prod .af-pc__orbita i { width: 30px !important; height: 30px !important; margin: -15px !important; font-size: .95rem !important; }
	.af-pt .af-pc__orbita i:last-child,
	.af-store .af-cat__lista-prod .af-pc__orbita i:last-child { width: 24px !important; height: 24px !important; margin: -12px !important; font-size: .75rem !important; }
	/* Perro / gato */
	.af-pt .af-pc__para,
	.af-store .af-cat__lista-prod .af-pc__para { top: 8px !important; left: 8px !important; gap: 3px !important; }
	.af-pt .af-pc__para span,
	.af-store .af-cat__lista-prod .af-pc__para span { width: 24px !important; height: 24px !important; font-size: .75rem !important; }
	.af-pt .af-pc__ola,
	.af-store .af-cat__lista-prod .af-pc__ola { height: 16px !important; }
	/* Precio tipo sticker */
	.af-pt .af-pc__precio,
	.af-store .af-cat__lista-prod .af-pc__precio { right: 6px !important; bottom: 14px !important; font-size: 1rem !important; padding: 5px 8px 4px !important; border-width: 2px !important; border-radius: 12px !important; }
	.af-pt .af-pc__precio small,
	.af-store .af-cat__lista-prod .af-pc__precio small { font-size: .55rem !important; margin-top: 2px !important; }
	/* Texto: categoría, nombre y descripción corta */
	.af-pt .af-pc__body,
	.af-store .af-cat__lista-prod .af-pc__body { padding: 8px 10px 12px !important; gap: 4px !important; }
	.af-pt .af-pc__cat,
	.af-store .af-cat__lista-prod .af-pc__cat { font-size: .58rem !important; letter-spacing: .08em !important; }
	.af-pt .af-pc__t,
	.af-store .af-cat__lista-prod .af-pc__t { font-size: 1.05rem !important; line-height: 1.1 !important; }
	.af-pt .af-pc__desc,
	.af-store .af-cat__lista-prod .af-pc__desc { font-size: .74rem !important; line-height: 1.35 !important; -webkit-line-clamp: 2 !important; }
	.af-pt .af-pc__puntos, .af-pt .af-pc__ver,
	.af-store .af-cat__lista-prod .af-pc__puntos, .af-store .af-cat__lista-prod .af-pc__ver { display: none !important; }
	.af-pt .af-pc__acc,
	.af-store .af-cat__lista-prod .af-pc__acc { padding-top: 10px !important; }
	.af-pt .af-pc__add,
	.af-store .af-cat__lista-prod .af-pc__add { min-height: 38px !important; padding: 8px 6px !important; font-size: .78rem !important; gap: 5px !important; box-shadow: 0 10px 16px -12px rgba(255, 122, 0, .9) !important; }
	.af-pt .af-pc__add .af-ico,
	.af-store .af-cat__lista-prod .af-pc__add .af-ico { width: 16px !important; height: 16px !important; }
	.af-pt .af-pc .added_to_cart,
	.af-store .af-cat__lista-prod .af-pc .added_to_cart { left: 8px; right: 8px; bottom: 58px; font-size: .72rem; padding: 6px; }
	/* Al tocar: pequeño rebote */
	.af-pt .af-pc:active, .af-store .af-cat__lista-prod .af-pc:active { transform: scale(.98); }

	/* Tienda: 2 por fila */
	.af-store .af-cat__lista-prod { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* ================= 4 · Menú en celular: hamburguesa visible + carrito siempre a la vista ================= */
@media (max-width: 999px) {
	.ct-header [data-device="mobile"] .ct-header-trigger,
	#header .ct-header-trigger {
		width: 46px !important; height: 46px !important; border-radius: 14px !important; display: inline-grid !important; place-items: center;
		background: var(--af-oscuro) !important; color: #fff !important; --theme-icon-color: #fff;
	}
	#header .ct-header-trigger .ct-icon, #header .ct-header-trigger svg { fill: #fff !important; color: #fff !important; width: 20px; height: 16px; }
	#header .ct-header-trigger rect { fill: #fff !important; }
	/* Carrito junto a la hamburguesa (lo agrega layout.js) */
	.af-cart-movil { display: inline-flex; align-items: center; margin-right: 8px; }
	.af-cart-movil .af-cart-link {
		position: relative; display: inline-grid !important; place-items: center; width: 46px; height: 46px; border-radius: 14px; padding: 0 !important;
		background: var(--af-naranja); color: #fff !important; text-decoration: none !important; box-shadow: 0 10px 18px -10px rgba(255, 122, 0, .9);
	}
	/* Se oculta solo el texto "Carrito"; el icono (también es un <span>) se queda */
	.af-cart-movil .af-cart-link > span:not(.af-ico) { display: none !important; }
	.af-cart-movil .af-cart-link .af-ico { display: block !important; width: 24px !important; height: 24px !important; color: #fff; }
	.af-cart-movil .af-cart-link .af-ico svg { display: block; width: 100%; height: 100%; }
	.af-cart-movil .af-cart-link b {
		position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
		background: var(--af-oscuro); color: #fff; font-family: var(--af-f-titulo); font-weight: 400; font-size: .8rem; line-height: 1; border: 2px solid #fff;
	}
}

/* ================= 5 · Nutrientes en cada bocado (celular): emojis alrededor sin encimarse ================= */
@media (max-width: 760px) {
	#nutrientes .af-nts__centro { width: min(240px, 66vw) !important; margin: 18px auto 26px !important; }
	#nutrientes .af-nts__plato { width: 54% !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9), 0 0 0 14px rgba(255, 255, 255, .15), 0 16px 26px -14px rgba(0, 0, 0, .5) !important; }
	#nutrientes .af-nts__aro span { width: 38px !important; height: 38px !important; margin: -19px !important; font-size: 1.1rem !important; }
	#nutrientes .af-nts__plato b { font-size: 1.5rem !important; }
	#nutrientes .af-nts__comida { font-size: 1rem !important; }
	#nutrientes .af-nts__vapor { display: none; }
}


/* ================= 6 · Páginas internas en celular: bloques más cortos y claros ================= */
@media (max-width: 760px) {
	/* --- Quiénes somos --- */
	.af-qv__orb { display: none !important; }                 /* se encimaban con el texto que gira */
	.af-qv__sello { width: min(62vw, 230px) !important; }
	.af-qp__foto img, .af-qp__foto .af-ph { max-height: 210px !important; }
	.af-qp__media { margin-bottom: 10px; }
	.af-qp__chip { font-size: .72rem !important; padding: 6px 10px !important; }
	.af-qp__ruta { gap: 10px !important; }
	.af-qpr__card li { align-items: center; }

	/* --- Tips y más --- */
	.af-empezar__foto { display: none !important; }
	.af-empezar .af-pasos { gap: 26px 10px !important; }
	.af-empezar .af-paso__img { width: 64px !important; height: 64px !important; }
	.af-tq__perro { width: 120px !important; margin: 30px auto 14px !important; }
	.af-tq__globo { font-size: .72rem !important; padding: 6px 10px !important; right: -60% !important; }
	.af-tq__lado .af-btn { width: 100%; }
	.af-tv__card { padding: 22px 14px 14px !important; }

	/* --- Beneficios --- */
	.af-bb__card:not(.af-bb__card--1):not(.af-bb__card--6) p { display: none !important; }
	.af-bb__card:not(.af-bb__card--1):not(.af-bb__card--6) { gap: 6px !important; }
	.af-bp__bens { grid-template-columns: 1fr 1fr !important; }
	.af-bp__bens li { flex-direction: column; align-items: flex-start !important; font-size: 0 !important; gap: 6px !important; }
	.af-bp__bens li strong { font-size: .82rem !important; }
	.af-bp__dato { display: none !important; }
	.af-bp__media { width: min(40vw, 150px) !important; }
	.af-be__top p { display: none !important; }
	.af-be__card ul { gap: 8px !important; }

	/* --- Nuestras recetas --- */
	.af-relige__grid { grid-template-columns: 1fr 1fr !important; }
	.af-relige__item { grid-template-columns: 1fr !important; justify-items: start; padding: 12px !important; }
	.af-relige__item span { grid-row: auto !important; margin-bottom: 6px; }
	.af-relige__item p { display: none !important; }
	.af-rd__intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

	/* --- Contacto --- */
	.af-tel { width: min(76vw, 270px) !important; transform: rotate(2deg); }
	.af-tel__chat { min-height: 0 !important; }
	.af-tel__msg:nth-child(n+4), .af-tel__escribe { display: none !important; }
	.af-chero__flot { display: none !important; }
}

/* ===== 7 · Presentaciones en tarjetas compactas (v1.27) ===== */
@media (max-width: 760px) {
	.af-pt .af-pres, .af-store .af-cat__lista-prod .af-pres { gap: 4px; margin-top: 6px; }
	.af-pt .af-pres__op, .af-store .af-cat__lista-prod .af-pres__op { font-size: .7rem; padding: 6px 4px; border-width: 1.5px; }
	.af-pt .af-pc__oferta, .af-store .af-cat__lista-prod .af-pc__oferta { top: 8px; right: 8px; font-size: .62rem; padding: 4px 8px; }
	.af-pt .af-pc--pedido .af-pc__precio, .af-store .af-cat__lista-prod .af-pc--pedido .af-pc__precio { font-size: .78rem !important; }
}