/* =========================================================
   ANIMAL FOOD · PORTADA (solo body.af-portada)
   - Ancho completo (monitores y laptops)
   - Secciones compactas: cada una cabe en una pantalla
   - Solo fondos blancos y azules, alternados
   ========================================================= */
.af-portada {
	--af-gut: clamp(16px, 3.2vw, 64px);
	--af-gap: clamp(14px, 1.6vw, 24px);
	--af-pad: clamp(36px, 6vh, 72px);
}

/* ---------- Ancho completo y ritmo vertical ---------- */
.af-portada .af-wrap { width: min(1680px, 100% - 2 * var(--af-gut)); }
.af-portada .af-sec { padding: var(--af-pad) 0; }
.af-portada .af-head { max-width: 900px; margin-bottom: clamp(18px, 3vh, 34px); }
.af-portada .af-h2 { font-size: clamp(1.75rem, 2.7vw, 2.75rem); margin-bottom: 10px; }
.af-portada .af-lead { font-size: clamp(.98rem, 1.1vw, 1.1rem); line-height: 1.6; margin-bottom: 18px; }
.af-portada .af-head .af-lead { margin-bottom: 0; }
.af-portada .af-kicker { margin-bottom: 10px; padding: 6px 13px; font-size: .76rem; }
.af-portada .af-btn { padding: 13px 24px; font-size: .95rem; }

/* =========================================================
   FONDOS: solo blanco o azul degradado, alternados
   hero azul · tienda blanco · cómo pedir azul · nosotros blanco ·
   recetas azul marino · ingredientes blanco · nutrientes azul ·
   perros y gatos blanco · porciones azul · vísceras blanco ·
   envíos azul marino · cómo empezar blanco
   ========================================================= */
.af-portada {
	--af-azul-grad: var(--af-grano), radial-gradient(55% 75% at 100% 0%, rgba(56, 182, 255, .55), transparent 62%), radial-gradient(45% 65% at 0% 100%, rgba(255, 156, 0, .2), transparent 60%), linear-gradient(150deg, #1769e0 0%, #1155c9 45%, #0c3c8c 100%);
}
.af-portada #como-pedir,
.af-portada #nutrientes { background: var(--af-azul-grad); color: #fff; animation: none; }
.af-portada #perros-y-gatos,
.af-portada .af-ig-sec,
.af-portada .af-ns { background: #fff; }

/* Textos sobre azul */
.af-portada #como-pedir .af-h2, .af-portada #nutrientes .af-h2 { color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .18); }
.af-portada #como-pedir .af-lead, .af-portada #nutrientes .af-lead { color: rgba(255, 255, 255, .88); }
.af-portada #como-pedir .af-kicker, .af-portada #nutrientes .af-kicker { color: #fff; background: rgba(255, 255, 255, .16); }
.af-portada #como-pedir .af-grad, .af-portada #nutrientes .af-grad { background-image: linear-gradient(90deg, #ffd27a, #ff9c00, #ffb84d, #ffd27a); }

/* =========================================================
   1 · HERO (diseño original completo + producto recomendado)
   ========================================================= */
.af-portada .af-hero { min-height: 0; padding: clamp(34px, 6vh, 72px) 0 clamp(72px, 8vh, 96px); }
.af-portada .af-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(20px, 3vw, 56px); }
.af-portada .af-hero__t { font-size: clamp(2.5rem, 4.9vw, 5.3rem); margin-bottom: 14px; }
.af-portada .af-hero .af-lead { max-width: 700px; margin-bottom: 22px; }
.af-portada .af-hero__sellos { margin-top: 20px; }
.af-portada .af-hero__media { max-width: min(640px, 68vh); width: 100%; justify-self: center; }

/* Tarjeta "Recomendado hoy" dentro del hero */
@property --af-giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes af-borde-gira { to { --af-giro: 360deg; } }
.af-hd {
	position: relative; max-width: 640px; margin-top: 28px; padding: 3px; border-radius: 28px; text-align: left;
	background: conic-gradient(from var(--af-giro), var(--af-naranja), #ffd27a, var(--af-naranja-2), #fff, var(--af-naranja));
	box-shadow: 0 26px 44px -22px rgba(5, 20, 60, .75);
	animation: af-borde-gira 5s linear infinite;
}
.af-hd__sello {
	position: absolute; z-index: 5; top: -13px; left: 22px; background: var(--af-naranja); color: #fff;
	font-family: var(--af-f-sub); font-weight: 700; font-size: .78rem; padding: 6px 12px; border-radius: 999px;
	box-shadow: 0 8px 16px -8px rgba(255, 122, 0, .9); animation: af-pill 3s ease-in-out infinite;
}
.af-hd__vista { display: grid; background: #fff; border-radius: 25px; }
.af-hd__item {
	grid-area: 1 / 1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 14px 18px 14px 14px;
	opacity: 0; visibility: hidden; transform: translateX(14px); transition: opacity .55s, transform .55s, visibility 0s .55s;
}
.af-hd__item.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s, transform .55s; }
.af-hd__plato {
	position: relative; width: 118px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
	background: repeating-conic-gradient(var(--c) 0 12deg, color-mix(in srgb, var(--c) 75%, #fff) 12deg 24deg);
}
.af-hd__img { width: 80%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: 0 10px 18px -8px rgba(15, 35, 80, .6); }
.af-hd__img img, .af-hd__img .af-ph { width: 100% !important; height: 100% !important; object-fit: cover; aspect-ratio: auto !important; display: block; }
.af-hd__item.is-on .af-hd__img { animation: af-plato-gira 6s ease-out both; }
@keyframes af-plato-gira { from { transform: rotate(-25deg) scale(.85); } to { transform: none; } }
.af-hd__emoji { position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.1rem; box-shadow: 0 6px 12px -6px rgba(15, 35, 80, .6); }
.af-hd__info { min-width: 0; }
.af-hd__t { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.55rem; line-height: 1.05; margin: 0 0 4px; }
.af-hd__t a { color: var(--af-oscuro); text-decoration: none; }
.af-hd__desc { margin: 0 0 10px; color: var(--af-gris); font-size: .86rem; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-hd__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.af-hd .af-prod__add { flex: none; white-space: nowrap; }
.af-hd__precio { font-family: var(--af-f-titulo); font-size: 1.6rem; color: var(--af-naranja-2); line-height: 1; white-space: nowrap; }
.af-hd__precio small { font-family: var(--af-f-sub); font-size: .72rem; color: var(--af-gris); }
.af-hd__precio del { font-size: .6em; opacity: .6; }
.af-hd__precio ins { text-decoration: none; }
.af-hd .af-prod__add { padding: 11px 16px !important; font-size: .9rem !important; }
.af-hd .added_to_cart { display: none; }
.af-hd__puntos { position: absolute; z-index: 5; top: -10px; right: 22px; display: flex; gap: 5px; background: #fff; padding: 6px 8px; border-radius: 999px; box-shadow: 0 8px 16px -8px rgba(15, 35, 80, .5); }
.af-hd__puntos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--af-azul-2); cursor: pointer; transition: all .3s; }
.af-hd__puntos button.is-on { width: 22px; background: var(--af-naranja); }

/* =========================================================
   2 · TIENDA: encabezado centrado + carril de tarjetas "plato"
   ========================================================= */
.af-portada .af-pt { padding-block: clamp(50px, 8vh, 96px); }
.af-portada .af-pt .af-head { margin-bottom: clamp(24px, 4vh, 44px); }
.af-portada .af-pt .af-filtros { margin: -10px 0 22px; }
.af-carril { position: relative; }
.af-carril__pista {
	--vis: 5;
	display: flex; gap: clamp(18px, 1.8vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 16px 6px 34px; margin: 0 -6px; scrollbar-width: none; outline: none;
}
.af-carril__pista::-webkit-scrollbar { display: none; }
.af-carril__pista > .af-pc { flex: 0 0 calc((100% - (var(--vis) - 1) * clamp(18px, 1.8vw, 28px)) / var(--vis)); scroll-snap-align: start; height: auto; }
.af-carril__pista > .af-pc.is-oculto { display: none; }
.af-pt__pie { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.af-pt__pie .af-flecha[hidden] { display: none; }

/* Flechas */
.af-flecha {
	display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
	background: #fff; color: var(--af-oscuro); border: 2px solid var(--af-azul-2); transition: all .25s;
}
.af-flecha .af-ico { width: 20px; height: 20px; }
.af-flecha--prev .af-ico { transform: scaleX(-1); }
.af-flecha:hover:not(:disabled) { background: var(--af-naranja); border-color: var(--af-naranja); color: #fff; }
.af-flecha:disabled { opacity: .35; cursor: default; }
.af-flecha--clara { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .35); }

/* Barra de encabezado en línea (slider de recetas) */
.af-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 30px; flex-wrap: wrap; margin-bottom: clamp(16px, 2.6vh, 28px); }
.af-bar__txt .af-h2 { margin: 0; }
.af-bar__acc { display: flex; align-items: center; gap: 10px; }

/* =========================================================
   3 · CÓMO PEDIR (compacto)
   ========================================================= */
.af-portada .af-pedir { margin-bottom: clamp(16px, 3vh, 30px); gap: var(--af-gap); }
.af-portada .af-pedir__ico { width: 84px; height: 84px; border-radius: 26px; margin-bottom: 12px; }
.af-portada .af-pedir__ico span { font-size: 2.5rem; }
.af-portada .af-pedir__linea { top: 30px; }
.af-portada .af-pedir__paso h3 { font-size: 1.4rem; color: #fff; }
.af-portada .af-pedir__paso p { color: rgba(255, 255, 255, .85); }
.af-portada .af-pedir__ico { background: #fff; box-shadow: 0 22px 36px -18px rgba(5, 20, 60, .7); }
.af-portada .af-pedir__linea path { stroke: #ffb84d; }

/* =========================================================
   4 · RECETAS: slider de foto grande (N1, distinto a la tienda)
   ========================================================= */
.af-rs {
	color: #fff;
	background: var(--af-grano), radial-gradient(55% 70% at 100% 0%, rgba(255, 156, 0, .28), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(56, 182, 255, .25), transparent 60%), linear-gradient(160deg, #0f2350 0%, #0c3c8c 75%, #1769e0 130%);
}
.af-rs .af-deco { color: #fff; opacity: .07; }
.af-rsl { position: relative; outline: none; }
.af-rsl__cont { font-family: var(--af-f-titulo); font-size: 1.2rem; color: rgba(255, 255, 255, .7); margin-right: 6px; }
.af-rsl__cont b { font-weight: 400; color: var(--af-naranja); font-size: 1.6rem; }
.af-rsl__vista { display: grid; touch-action: pan-y; }
.af-rsl__slide {
	grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 64px); align-items: center;
	opacity: 0; visibility: hidden; transform: translateX(30px); transition: opacity .55s, transform .65s cubic-bezier(.2, .8, .2, 1), visibility 0s .65s;
}
.af-rsl__slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s, transform .65s cubic-bezier(.2, .8, .2, 1); }
.af-rsl__slide.is-sale { transform: translateX(-30px); }
.af-rsl__foto { position: relative; margin: 0; height: clamp(260px, 56vh, 600px); border-radius: 34px; overflow: hidden; border: 6px solid rgba(255, 255, 255, .92); box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .7); background: var(--af-crema); }
.af-rsl__foto img, .af-rsl__foto .af-ph { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; display: block; }
.af-rsl__slide.is-on .af-rsl__foto img { animation: af-acerca 9s ease-out both; }
.af-rsl__num { position: absolute; top: 18px; left: 18px; font-family: var(--af-f-titulo); font-size: 1.4rem; color: #fff; background: var(--c); border: 3px solid #fff; border-radius: 16px; padding: 4px 14px; }
.af-rsl__emoji { position: absolute; right: 18px; bottom: 18px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem; background: #fff; box-shadow: 0 16px 26px -12px rgba(0, 0, 0, .55); animation: af-bota 3s ease-in-out infinite; }
.af-rsl__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.af-rsl__tags span { font-family: var(--af-f-sub); font-weight: 600; font-size: .8rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); padding: 6px 12px; border-radius: 999px; }
.af-rsl__t { font-family: var(--af-f-titulo); font-weight: 400; color: #fff; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1; margin: 0 0 14px; }
.af-rsl__t::after { content: ''; display: block; width: 90px; height: 6px; border-radius: 9px; margin-top: 14px; background: color-mix(in srgb, var(--c) 60%, #ff9c00); }
.af-rsl__desc { font-size: clamp(1.02rem, 1.3vw, 1.25rem); line-height: 1.6; color: rgba(255, 255, 255, .9); margin: 0 0 16px; }
.af-rsl__puntos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.af-rsl__puntos li { display: flex; align-items: center; gap: 10px; font-family: var(--af-f-sub); font-weight: 500; }
.af-rsl__puntos .af-ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--af-naranja); color: #fff; }
.af-rsl__precio { margin: 0 0 18px; font-family: var(--af-f-sub); color: rgba(255, 255, 255, .75); }
.af-rsl__precio .amount, .af-rsl__precio bdi { font-family: var(--af-f-titulo); font-size: 1.6rem; color: var(--af-naranja); }
.af-rsl__thumbs { display: flex; gap: 10px; margin-top: clamp(16px, 3vh, 28px); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.af-rsl__thumbs::-webkit-scrollbar { display: none; }
.af-rsl__thumbs button {
	position: relative; overflow: hidden; flex: 1 1 0; min-width: 130px; display: flex; align-items: center; gap: 10px; cursor: pointer;
	background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .18); color: #fff; border-radius: 18px; padding: 10px 14px;
	font-family: var(--af-f-sub); font-weight: 600; font-size: .95rem; transition: all .25s; text-align: left;
}
.af-rsl__thumbs button:hover { border-color: rgba(255, 255, 255, .5); }
.af-rsl__thumbs button.is-on { background: #fff; color: var(--af-oscuro); border-color: #fff; }
.af-rsl__th-em { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 1.3rem; background: rgba(255, 255, 255, .15); }
.af-rsl__thumbs button.is-on .af-rsl__th-em { background: var(--af-crema); }
.af-rsl__th-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--af-naranja); }
.af-rsl.is-auto .af-rsl__thumbs button.is-on .af-rsl__th-bar { animation: af-avance var(--dur, 8s) linear forwards; }
.af-rsl.is-pausa .af-rsl__th-bar { animation-play-state: paused !important; }
@keyframes af-avance { to { width: 100%; } }

/* =========================================================
   SECCIONES INFORMATIVAS COMPACTAS (escritorio)
   ========================================================= */
/* Nutrientes (sobre azul): tarjetas blancas de ancho fijo alrededor del plato */
.af-portada .af-nts { grid-template-columns: minmax(0, 470px) minmax(230px, min(320px, 40vh)) minmax(0, 470px); justify-content: center; gap: clamp(16px, 2.2vw, 34px); }
.af-portada .af-nts__col { gap: 12px; }
.af-portada .af-nt {
	background: #fff; border: 0; padding: 14px 18px; gap: 14px; border-radius: 22px;
	box-shadow: inset 6px 0 0 var(--c), 0 18px 30px -18px rgba(5, 20, 60, .65);
	transition: transform .3s;
}
.af-portada .af-nt--izq { box-shadow: inset -6px 0 0 var(--c), 0 18px 30px -18px rgba(5, 20, 60, .65); }
.af-portada .af-nt--izq:hover { transform: translateX(-6px); }
.af-portada .af-nt--der:hover { transform: translateX(6px); }
.af-portada .af-nt__ico { width: 54px; height: 54px; font-size: 1.6rem; border-radius: 16px; }
.af-portada .af-nt h3 { font-size: 1.3rem; }
.af-portada .af-nt p { font-size: .95rem; margin: 2px 0 6px; }
.af-portada .af-nt::before { border-top-color: rgba(255, 255, 255, .55); }
.af-portada .af-nts__aro { border-color: rgba(255, 255, 255, .45); }
.af-portada .af-nts__plato { box-shadow: 0 0 0 12px rgba(255, 255, 255, .9), 0 0 0 26px rgba(255, 255, 255, .15), 0 30px 50px -20px rgba(0, 0, 0, .5); }

/* Perros y gatos */
.af-portada .af-mg__card { padding: clamp(22px, 2.6vw, 34px); }

/* Porciones */
.af-portada .af-guia { padding: clamp(18px, 2.4vw, 32px); }
.af-portada .af-guia__especie { margin-bottom: 18px; }
.af-portada .af-guia__escena { width: 100%; max-width: min(100%, 44vh); margin-inline: auto; }
.af-portada .af-guia__todos { margin-top: 18px; padding-top: 16px; }
.af-portada .af-guia__minis { grid-template-columns: repeat(4, 1fr); }
.af-portada .af-guia__mini { padding: 10px 8px 8px; }

/* Vísceras */
.af-portada .af-vs { grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: auto; }
.af-portada .af-vs__donas { grid-row: auto; }
.af-portada .af-dona__aro { width: min(170px, 100%); }
.af-portada .af-panel { padding: clamp(18px, 2vw, 28px); }

/* Envíos */
.af-portada .af-env__mapa { max-width: min(560px, 62vh); width: 100%; justify-self: center; }

/* Cómo empezar: texto+foto a la izquierda, pasos 2×2 a la derecha */
.af-empezar__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 70px); align-items: center; }
.af-empezar__foto { transform: rotate(-1.5deg); }
.af-empezar__foto img, .af-empezar__foto .af-ph { aspect-ratio: 16 / 9 !important; max-height: 30vh; }
.af-empezar .af-pasos { grid-template-columns: 1fr 1fr; gap: 28px var(--af-gap); }
.af-portada .af-paso { padding: 22px 18px 18px; }
.af-portada .af-paso__img { width: 86px; height: 86px; margin: 4px auto 8px; }

/* CTA */
.af-portada .af-cta { padding-top: 0; }
.af-portada .af-cta__box { padding: clamp(32px, 5vh, 60px) clamp(22px, 5vw, 80px); }


/* =========================================================
   QUIÉNES SOMOS (rediseño)
   ========================================================= */
.af-ns__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.af-ns__media { position: relative; width: 100%; max-width: min(620px, 66vh); aspect-ratio: 1 / .92; justify-self: center; }
.af-ns__blob {
	position: absolute; inset: 8% 10% 6% 6%; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
	background: var(--af-grano), linear-gradient(140deg, #38b6ff, #1769e0 55%, #0c3c8c);
	box-shadow: 0 40px 70px -30px rgba(23, 105, 224, .7); animation: af-blob 14s ease-in-out infinite;
}
.af-ns__aro { position: absolute; inset: 1% 5% 1% 1%; border: 3px dashed var(--af-naranja); border-radius: 50%; opacity: .75; animation: af-giro 45s linear infinite; }
.af-ns__foto { position: absolute; border-radius: 50%; overflow: hidden; border: 8px solid #fff; background: #fff; box-shadow: 0 30px 50px -24px rgba(15, 35, 80, .65); }
.af-ns__foto img, .af-ns__foto .af-ph { width: 100% !important; height: 100% !important; object-fit: cover; aspect-ratio: auto !important; display: block; }
.af-ns__foto--1 { left: 12%; top: 12%; width: 60%; aspect-ratio: 1; }
.af-ns__foto--2 { right: 4%; bottom: 4%; width: 36%; aspect-ratio: 1; animation: af-flota2 6s ease-in-out infinite; }
.af-ns__sello {
	position: absolute; top: 4%; right: 12%; width: 108px; height: 108px; border-radius: 50%; display: grid; place-content: center; text-align: center;
	background: linear-gradient(135deg, var(--af-naranja), var(--af-naranja-2)); color: #fff; border: 4px solid #fff; transform: rotate(10deg);
	font-family: var(--af-f-sub); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
	box-shadow: 0 16px 28px -12px rgba(255, 122, 0, .8); animation: af-flota 4.5s ease-in-out infinite;
}
.af-ns__sello b { display: block; font-family: var(--af-f-titulo); font-weight: 400; font-size: 2.1rem; letter-spacing: 0; line-height: 1; text-transform: none; }
.af-ns__chip {
	position: absolute; background: #fff; color: var(--af-oscuro); font-family: var(--af-f-sub); font-weight: 600; font-size: .92rem;
	padding: 10px 16px; border-radius: 999px; box-shadow: 0 16px 28px -14px rgba(15, 35, 80, .6); animation: af-ingflot 5s ease-in-out infinite; white-space: nowrap;
}
.af-ns__chip--1 { left: 0; bottom: 26%; }
.af-ns__chip--2 { left: 26%; bottom: 2%; animation-delay: -2.5s; }

.af-ns__txt .af-h2 { font-size: clamp(2rem, 3.2vw, 3.2rem); }
.af-ns__valores { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.af-ns__valores li { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid #e6eefb; border-radius: 20px; padding: 12px 14px; font-size: .84rem; color: var(--af-gris); line-height: 1.35; transition: border-color .25s, transform .25s; }
.af-ns__valores li:hover { border-color: var(--af-naranja); transform: translateY(-3px); }
.af-ns__valores li > span { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: linear-gradient(145deg, #fff, #ffe9c9); box-shadow: inset 0 -3px 0 rgba(255, 122, 0, .15); }
.af-ns__valores strong { display: block; font-family: var(--af-f-sub); font-size: .95rem; color: var(--af-oscuro); }
.af-ns__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.af-ns__stat { position: relative; overflow: hidden; border-radius: 22px; padding: 16px 18px; color: #fff; box-shadow: 0 20px 34px -22px rgba(15, 35, 80, .8); }
.af-ns__stat::after { content: '🐾'; position: absolute; right: -6px; bottom: -10px; font-size: 3.4rem; opacity: .16; transform: rotate(-18deg); }
.af-ns__stat strong { display: block; font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; }
.af-ns__stat span { font-size: .84rem; opacity: .92; }
.af-ns__stat--n { background: var(--af-grano), linear-gradient(140deg, #ffb13d, var(--af-naranja-2)); }
.af-ns__stat--a { background: var(--af-grano), linear-gradient(140deg, var(--af-cielo), var(--af-azul-p)); }
.af-ns__stat--o { background: var(--af-grano), linear-gradient(140deg, var(--af-azul-o), var(--af-oscuro)); }

/* =========================================================
   INGREDIENTES (rediseño): lista + panel grande
   ========================================================= */
.af-ig { display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); gap: clamp(16px, 2vw, 30px); align-items: stretch; }
.af-ig__nav { display: grid; gap: 10px; align-content: center; }
.af-ig__tab {
	display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
	background: #fff; border: 2px solid #e6eefb; border-radius: 20px; padding: 10px 14px 10px 10px;
	font-family: var(--af-f-sub); font-weight: 600; font-size: 1rem; color: var(--af-oscuro);
	transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), background .25s, border-color .25s, color .25s;
}
.af-ig__em { flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: var(--bg); transition: transform .3s; }
.af-ig__n { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.af-ig__n small { font-weight: 500; font-size: .75rem; color: var(--af-gris); margin-top: 2px; }
.af-ig__tab .af-ico { width: 20px; height: 20px; opacity: .25; transition: all .3s; }
.af-ig__tab:hover { border-color: var(--af-naranja); transform: translateX(4px); }
.af-ig__tab:hover .af-ig__em { transform: rotate(-10deg) scale(1.08); }
.af-ig__tab.is-on { background: var(--af-oscuro); border-color: var(--af-oscuro); color: #fff; transform: translateX(10px); box-shadow: 0 18px 30px -18px rgba(15, 35, 80, .8); }
.af-ig__tab.is-on small { color: rgba(255, 255, 255, .7); }
.af-ig__tab.is-on .af-ico { opacity: 1; color: var(--af-naranja); transform: translateX(3px); }

.af-ig__panel {
	display: none; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 100%;
	background: #fff; border-radius: 34px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 35, 80, .06), 0 34px 60px -36px rgba(15, 35, 80, .6);
}
.af-ig__panel.is-on { display: grid; animation: af-entra .5s ease both; }
.af-ig__escena { position: relative; display: grid; place-items: center; min-height: 320px; overflow: hidden; background: var(--af-naranja); }
.af-ig__rayos { position: absolute; inset: -40%; background: repeating-conic-gradient(#ff9c00 0 10deg, color-mix(in srgb, var(--bg) 55%, #ff8a00) 10deg 20deg); animation: af-giro 60s linear infinite; }
.af-ig__escena::after { content: ''; position: absolute; inset: 0; background: var(--af-grano), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .5) 0 26%, transparent 60%); pointer-events: none; }
.af-ig__plato {
	position: relative; z-index: 2; width: min(250px, 62%); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff;
	box-shadow: 0 0 0 14px rgba(255, 255, 255, .35), 0 0 0 28px rgba(255, 255, 255, .15), 0 30px 40px -18px rgba(15, 35, 80, .6);
}
.af-ig__plato span { font-size: clamp(5rem, 8vw, 7.5rem); line-height: 1; animation: af-bota 3s ease-in-out infinite; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .18)); }
.af-ig__cont { position: absolute; z-index: 3; top: 18px; left: 18px; background: var(--af-oscuro); color: #fff; font-family: var(--af-f-titulo); font-size: 1rem; padding: 5px 12px; border-radius: 12px; }
.af-ig__info { padding: clamp(22px, 3vw, 46px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.af-ig__tag { font-family: var(--af-f-sub); font-weight: 600; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--af-naranja-2); }
.af-ig__info h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1; color: var(--af-oscuro); margin: 6px 0 18px; }
.af-ig__bens { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; width: 100%; }
.af-ig__bens li { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid #e6eefb; border-radius: 18px; padding: 10px 14px 10px 10px; font-size: 1rem; line-height: 1.45; }
.af-ig__bens b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--af-f-titulo); font-weight: 400; color: #fff; background: linear-gradient(140deg, var(--af-cielo), var(--af-azul-p)); }
.af-ig__panel.is-on .af-ig__bens li { animation: af-entra .5s ease both; }
.af-ig__panel.is-on .af-ig__bens li:nth-child(2) { animation-delay: .08s; }
.af-ig__panel.is-on .af-ig__bens li:nth-child(3) { animation-delay: .16s; }

@media (max-width: 1100px) {
	.af-ns__valores { grid-template-columns: 1fr; }
	.af-ig { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
	.af-ig__panel { grid-template-columns: 1fr; }
	.af-ig__escena { min-height: 220px; }
	.af-portada .af-nts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.af-portada .af-hero__grid { grid-template-columns: 1fr; }
	.af-ns__grid { grid-template-columns: 1fr; gap: 20px; }
	.af-ns__media { max-width: 330px; }
	.af-ns__sello { width: 78px; height: 78px; font-size: .62rem; }
	.af-ns__sello b { font-size: 1.5rem; }
	.af-ns__chip { font-size: .76rem; padding: 7px 11px; }
	.af-ns__txt { text-align: center; }
	.af-ns__txt .af-btns { justify-content: center; }
	.af-ns__valores { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.af-ns__valores li { flex-direction: column; text-align: center; padding: 10px 6px; gap: 6px; font-size: .72rem; }
	.af-ns__valores li > span { width: 36px; height: 36px; font-size: 1.15rem; }
	.af-ns__valores strong { font-size: .8rem; }
	.af-ns__stats { gap: 6px; margin-bottom: 18px; }
	.af-ns__stat { padding: 12px 8px; text-align: center; border-radius: 18px; }
	.af-ns__stat strong { font-size: 1.6rem; }
	.af-ns__stat--o strong { font-size: 1.3rem; padding-top: 4px; }
	.af-ns__stat span { font-size: .7rem; display: block; line-height: 1.25; }

	.af-ig { grid-template-columns: 1fr; gap: 12px; }
	.af-ig__nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; padding: 2px 2px 6px; }
	.af-ig__nav::-webkit-scrollbar { display: none; }
	.af-ig__tab { flex: none; width: auto; padding: 6px 12px 6px 6px; font-size: .85rem; border-radius: 16px; }
	.af-ig__tab.is-on { transform: none; }
	.af-ig__em { width: 34px; height: 34px; font-size: 1.15rem; border-radius: 11px; }
	.af-ig__n small, .af-ig__tab .af-ico { display: none; }
	.af-ig__panel { grid-template-columns: 1fr; border-radius: 24px; }
	.af-ig__escena { min-height: 130px; }
	.af-ig__plato { width: 84px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .35), 0 14px 20px -10px rgba(15, 35, 80, .6); }
	.af-ig__plato span { font-size: 2.8rem; }
	.af-ig__cont { top: 8px; left: 8px; font-size: .75rem; padding: 3px 8px; }
	.af-ig__info { padding: 14px; }
	.af-ig__info h3 { font-size: 1.6rem; margin: 2px 0 10px; }
	.af-ig__bens { gap: 6px; margin-bottom: 12px; }
	.af-ig__bens li { font-size: .82rem; padding: 6px 8px 6px 6px; gap: 8px; border-radius: 14px; }
	.af-ig__bens b { width: 24px; height: 24px; font-size: .8rem; }
	.af-ig__info .af-btn { padding: 10px 16px; font-size: .85rem; }

	.af-portada .af-nt, .af-portada .af-nt--izq { box-shadow: inset 4px 0 0 var(--c), 0 12px 22px -14px rgba(5, 20, 60, .6); }
}

/* =========================================================
   LAPTOPS (pantallas bajas): aún más compacto
   ========================================================= */
@media (min-width: 861px) and (max-height: 800px) {
	.af-portada { --af-pad: 34px; }
	.af-portada .af-hero__t { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
	.af-portada .af-hero .af-lead { font-size: .98rem; }
	.af-hd { margin-top: 18px; }
	.af-hd__plato { width: 96px; }
	.af-portada .af-hero__sellos { margin-top: 14px; }
	.af-rsl__foto { height: clamp(240px, 52vh, 460px); }
	.af-rsl__t { font-size: clamp(2rem, 3.2vw, 3rem); }
	.af-portada .af-h2 { font-size: clamp(1.6rem, 2.3vw, 2.3rem); }
	.af-portada .af-pedir__paso p, .af-portada .af-paso p { font-size: .9rem; }
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1400px) { .af-carril__pista { --vis: 4; } }
@media (max-width: 1100px) {
	.af-carril__pista { --vis: 3; }
	.af-portada .af-vs { grid-template-columns: 1fr 1fr; }
	.af-portada .af-vs__donas { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
	.af-rsl__slide { grid-template-columns: 1fr 1fr; }
	.af-empezar__grid { grid-template-columns: 1fr; }
	.af-empezar__txt { text-align: center; }
	.af-empezar__foto { max-width: 520px; margin: 0 auto; }
}

/* =========================================================
   MÓVIL: cada bloque en una sola pantalla sin perder información
   ========================================================= */
@media (max-width: 860px) {
	.af-portada { --af-pad: 34px; --af-gut: 14px; }
	.af-portada .af-sec { padding: var(--af-pad) 0; }
	.af-portada .af-head { margin-bottom: 16px; }
	.af-portada .af-h2 { font-size: clamp(1.5rem, 6.4vw, 2rem); }
	.af-portada .af-lead { font-size: .95rem; line-height: 1.5; }
	.af-portada .af-btns { gap: 8px; }
	.af-portada .af-btns .af-btn { flex: 1 1 0; min-width: 0; padding: 12px 10px; font-size: .88rem; gap: 6px; }
	.af-bar { align-items: center; }
	.af-bar .af-flecha { display: none; }
	.af-bar .af-btn { padding: 10px 14px; font-size: .82rem; }

	/* Hero (todo visible, solo más compacto) */
	.af-portada .af-hero { min-height: 0; padding: 24px 0 56px; }
	.af-portada .af-hero__t { font-size: clamp(2rem, 8.6vw, 2.8rem); margin-bottom: 10px; }
	.af-portada .af-hero .af-lead { margin: 0 auto 16px; font-size: .92rem; }
	.af-portada .af-hero__sellos { margin-top: 14px; }
	.af-portada .af-hero__media { max-width: min(340px, 42svh); }

	/* Recomendado hoy */
	.af-hd { margin: 22px auto 0; max-width: 460px; }
	.af-hd__item { gap: 12px; padding: 12px; }
	.af-hd__plato { width: 92px; }
	.af-hd__t { font-size: 1.25rem; }
	.af-hd__desc { font-size: .78rem; margin-bottom: 8px; }
	.af-hd__precio { font-size: 1.3rem; }
	.af-hd .af-prod__add { padding: 9px 12px !important; font-size: .8rem !important; }
	.af-hd__pie { flex-wrap: wrap; gap: 6px 10px; }
	.af-hd__item { grid-template-columns: auto minmax(0, 1fr); }

	/* Tienda: tarjetas con "asomo" para indicar deslizamiento */
	.af-carril__pista { --vis: 2.2; }

	/* Cómo pedir: 3 columnas compactas */
	.af-portada .af-pedir { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.af-portada .af-pedir__ico { width: 58px; height: 58px; border-radius: 18px; margin-bottom: 8px; }
	.af-portada .af-pedir__ico span { font-size: 1.7rem; }
	.af-portada .af-pedir__ico b { width: 24px; height: 24px; font-size: .85rem; top: -8px; right: -8px; border-width: 2px; }
	.af-portada .af-pedir__paso h3 { font-size: 1.02rem; margin-bottom: 4px; }
	.af-portada .af-pedir__paso p { font-size: .78rem; line-height: 1.4; }

	/* Recetas */
	.af-rsl__slide { grid-template-columns: 1fr; gap: 14px; }
	.af-rsl__foto { height: clamp(170px, 30svh, 260px); border-width: 4px; border-radius: 24px; }
	.af-rsl__emoji { width: 54px; height: 54px; font-size: 1.8rem; right: 12px; bottom: 12px; }
	.af-rsl__num { font-size: 1.05rem; top: 12px; left: 12px; }
	.af-rsl__t { font-size: clamp(1.7rem, 7.4vw, 2.2rem); margin-bottom: 8px; }
	.af-rsl__t::after { margin-top: 8px; height: 4px; width: 60px; }
	.af-rsl__tags { margin-bottom: 8px; }
	.af-rsl__desc { font-size: .92rem; margin-bottom: 10px; }
	.af-rsl__puntos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
	.af-rsl__puntos li { font-size: .78rem; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 4px 10px 4px 4px; gap: 6px; }
	.af-rsl__puntos .af-ico { width: 20px; height: 20px; padding: 4px; }
	.af-rsl__precio { margin-bottom: 12px; font-size: .88rem; }
	.af-rsl__precio .amount, .af-rsl__precio bdi { font-size: 1.3rem; }
	.af-rsl__thumbs { margin-top: 14px; gap: 6px; }
	.af-rsl__thumbs button { min-width: 0; flex: 0 0 auto; padding: 6px 10px 6px 6px; font-size: .8rem; border-radius: 14px; }
	.af-rsl__th-em { width: 30px; height: 30px; font-size: 1.05rem; border-radius: 10px; }
	.af-rsl__cont { font-size: 1rem; }
	.af-rsl__cont b { font-size: 1.3rem; }

	/* Nutrientes: plato pequeño + rejilla 2×4 */
	.af-portada .af-nts { grid-template-columns: 1fr 1fr; gap: 8px; }
	.af-portada .af-nts__centro { grid-column: 1 / -1; grid-row: 1; width: min(170px, 46vw); margin: 4px auto 12px; }
	.af-portada .af-nts__aro span { width: 34px; height: 34px; margin: -17px; font-size: 1rem; }
	.af-portada .af-nts__plato b { font-size: 1.6rem; }
	.af-portada .af-nts__plato b small { font-size: .65rem; }
	.af-portada .af-nts__col { gap: 8px; }
	.af-portada .af-nt, .af-portada .af-nt--izq { flex-direction: column; align-items: flex-start; text-align: left; padding: 10px 12px; gap: 6px; border-radius: 18px; }
	.af-portada .af-nt__ico { width: 38px; height: 38px; font-size: 1.2rem; border-radius: 12px; }
	.af-portada .af-nt h3 { font-size: 1.02rem; }
	.af-portada .af-nt p { font-size: .78rem; margin: 0 0 4px; }
	.af-portada .af-nt small { font-size: .66rem; padding: 3px 8px; margin-left: 0 !important; }

	/* Perros y gatos */
	.af-portada .af-mg { gap: 10px; }
	.af-portada .af-mg__card { padding: 18px 16px; }

	/* Porciones */
	.af-portada .af-guia { padding: 14px; border-radius: 24px; }
	.af-portada .af-guia::before { display: none; }
	.af-portada .af-guia__especie { margin-bottom: 12px; }
	.af-portada .af-guia__esp { padding: 8px; font-size: 1.15rem; }
	.af-portada .af-guia__grid { grid-template-columns: 1fr; gap: 12px; }
	.af-portada .af-guia__escena { max-width: 200px; }
	.af-portada .af-guia__chips { grid-template-columns: repeat(4, 1fr); gap: 6px; }
	.af-portada .af-guia__chip { padding: 8px 4px; border-radius: 14px; }
	.af-portada .af-guia__chip strong { font-size: .82rem; }
	.af-portada .af-guia__actividad { margin-top: 10px; }
	.af-portada .af-guia__paso { margin-bottom: 8px; font-size: .9rem; }
	.af-portada .af-guia__minis { grid-template-columns: repeat(4, 1fr); gap: 6px; }
	.af-portada .af-guia__mini { padding: 8px 4px 6px; border-radius: 14px; }
	.af-portada .af-guia__mini-plato { width: 44px; height: 24px; margin-bottom: 4px; }
	.af-portada .af-guia__mini strong { font-size: .95rem; }
	.af-portada .af-guia__mini span:last-child { font-size: .68rem; }

	/* Vísceras: paneles deslizables */
	.af-portada .af-vs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; margin: 0 calc(-1 * var(--af-gut)); padding-inline: var(--af-gut); scrollbar-width: none; }
	.af-portada .af-vs::-webkit-scrollbar { display: none; }
	.af-portada .af-vs > .af-panel { flex: 0 0 86%; scroll-snap-align: center; }
	.af-portada .af-dona__aro { width: min(130px, 100%); }
	.af-portada .af-pills li { font-size: .74rem; padding: 5px 10px; }

	/* Envíos */
	.af-portada .af-env { gap: 18px; }
	.af-portada .af-env__mapa { max-width: 260px; }
	.af-portada .af-env__chips { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }
	.af-portada .af-env__chips li { flex-direction: column; text-align: center; padding: 8px 6px; gap: 6px; }
	.af-portada .af-env__chips .af-ico { width: 30px; height: 30px; padding: 6px; }

	/* Cómo empezar */
	.af-empezar .af-pasos { gap: 22px 10px; }
	.af-portada .af-paso { padding: 20px 10px 12px; }
	.af-portada .af-paso__img { width: 56px; height: 56px; }
	.af-portada .af-paso__img .af-ph span { font-size: 2rem; }
	.af-portada .af-paso h3 { font-size: 1.05rem; }
	.af-portada .af-paso p { font-size: .8rem; }

	.af-portada .af-cta__box { padding: 30px 18px; }
}
@media (max-width: 480px) {
	.af-carril__pista { --vis: 1.3; }
	.af-hd__plato { width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
	.af-hd__item, .af-rsl__slide { transition: none; }
	.af-hd, .af-hd__sello { animation: none; }
}

/* =========================================================
   LLAMADA FINAL: perrito asomándose detrás de la mesa
   ========================================================= */
.af-pcta-sec { padding-top: clamp(40px, 6vh, 70px) !important; }
.af-pcta {
	position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: clamp(10px, 3vw, 50px);
	border-radius: 36px; padding: clamp(30px, 4vw, 56px) clamp(24px, 4vw, 64px) 0; overflow: hidden;
	background: var(--af-grano), radial-gradient(60% 80% at 100% 0%, rgba(255, 156, 0, .45), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(56, 182, 255, .4), transparent 60%), linear-gradient(135deg, var(--af-azul-o) 0%, var(--af-azul-p) 60%, var(--af-cielo) 100%);
	box-shadow: 0 40px 80px -40px rgba(23, 105, 224, .75);
}
.af-pcta .af-deco { color: #fff; opacity: .1; }
.af-pcta__txt { position: relative; z-index: 2; padding-bottom: clamp(30px, 4vw, 56px); align-self: center; }
.af-pcta__txt .af-h2 { font-size: clamp(1.9rem, 3.2vw, 3.1rem); }
.af-pcta__txt .af-lead { max-width: 560px; }

/* Escena */
.af-asoma { position: relative; width: min(100%, 470px); aspect-ratio: 612 / 470; justify-self: center; }
.af-asoma > picture { display: block; }
.af-asoma img { display: block; width: 100%; height: auto; }
.af-asoma img { filter: drop-shadow(0 14px 18px rgba(5, 20, 60, .35)); }

/* Cara: sube y baja asomándose por detrás de la mesa */
.af-asoma__cara { position: absolute; left: 17%; bottom: 6%; width: 66%; z-index: 1; animation: af-asoma-cara 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes af-asoma-cara {
	0%, 100% { transform: translateY(22%) rotate(0); }
	18%, 70% { transform: translateY(0) rotate(-3deg); }
	44% { transform: translateY(-3%) rotate(3deg); }
}

/* Mesa (borde blanco con mantel) */
.af-asoma__mesa {
	position: absolute; z-index: 2; left: -12%; right: -12%; bottom: 0; height: 18%;
	background: linear-gradient(180deg, #fff 0 22%, #e8f0fb 22% 100%); border-radius: 18px 18px 0 0;
	box-shadow: 0 -10px 24px -14px rgba(5, 20, 60, .5);
}
.af-asoma__mesa i { position: absolute; left: 0; right: 0; top: 22%; height: 24%; background: repeating-linear-gradient(90deg, var(--af-naranja) 0 22px, #fff 22px 44px); opacity: .9; }

/* Manos con cubiertos: golpean la mesa por turnos */
.af-asoma__mano { position: absolute; z-index: 3; bottom: 6%; width: 22%; transform-origin: 50% 95%; }
.af-asoma__mano--izq { left: 2%; animation: af-asoma-golpe 1.1s ease-in-out infinite; }
.af-asoma__mano--der { right: 2%; width: 24%; animation: af-asoma-golpe 1.1s ease-in-out infinite -.55s; }
@keyframes af-asoma-golpe {
	0%, 100% { transform: translateY(0) rotate(0); }
	35% { transform: translateY(-16%) rotate(-6deg); }
	55% { transform: translateY(2%) rotate(2deg); }
	62% { transform: translateY(0) rotate(0); }
}

/* Comida que salta de la mesa y globo */
.af-asoma__comida { position: absolute; z-index: 2; bottom: 14%; font-size: clamp(1.4rem, 2.6vw, 2.2rem); animation: af-asoma-salta 2.2s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(5, 20, 60, .35)); }
.af-asoma__comida--1 { left: 26%; animation-delay: 0s; }
.af-asoma__comida--2 { left: 48%; animation-delay: -.7s; }
.af-asoma__comida--3 { left: 68%; animation-delay: -1.4s; }
@keyframes af-asoma-salta {
	0%, 100% { transform: translateY(0) rotate(0); opacity: 0; }
	15% { opacity: 1; }
	50% { transform: translateY(-120%) rotate(18deg); opacity: 1; }
	85% { transform: translateY(-10%) rotate(-10deg); opacity: .9; }
}
.af-asoma__globo {
	position: absolute; z-index: 4; right: -2%; top: 2%; white-space: nowrap;
	background: #fff; color: var(--af-oscuro); font-family: var(--af-f-sub); font-weight: 700; font-size: clamp(.78rem, 1vw, .95rem);
	padding: 9px 14px; border-radius: 18px 18px 4px 18px; box-shadow: 0 14px 26px -12px rgba(5, 20, 60, .6);
	animation: af-m-globo-p 4.2s ease-in-out infinite;
}
@keyframes af-m-globo-p { 0%, 12%, 100% { transform: scale(.6); opacity: 0; } 22%, 70% { transform: scale(1) rotate(-2deg); opacity: 1; } }

/* Al pasar el mouse: golpea más rápido */
.af-pcta:hover .af-asoma__mano { animation-duration: .5s; }

@media (max-width: 860px) {
	.af-pcta { grid-template-columns: 1fr; text-align: center; padding-top: 28px; }
	.af-pcta__txt { padding-bottom: 6px; }
	.af-pcta__txt .af-lead { margin-inline: auto; }
	.af-pcta__txt .af-btns { justify-content: center; }
	.af-asoma { width: min(86%, 340px); }
}
@media (prefers-reduced-motion: reduce) {
	.af-asoma *, .af-asoma { animation: none !important; }
	.af-asoma__cara { transform: none; }
	.af-asoma__globo { opacity: 1; transform: none; }
	.af-asoma__comida { opacity: 1; }
}

/* =========================================================
   PORTADA ENFOCADA EN TIENDA (7 bloques)
   ========================================================= */

/* 3 · Cómo pedir + envíos (azul) */
.af-cp__pasos { list-style: none; margin: 0 0 clamp(18px, 3vh, 30px); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 26px); counter-reset: none; }
.af-cp__paso {
	position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 24px;
	background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); color: #fff;
}
.af-cp__paso:not(:last-child)::after { /* flecha entre pasos */
	content: '→'; position: absolute; right: calc(-1 * clamp(12px, 2vw, 26px) / 2 - 11px); top: 50%; transform: translateY(-50%);
	width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--af-naranja); color: #fff; font-size: .8rem; z-index: 2;
}
.af-cp__ico { position: relative; flex: none; width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; background: #fff; box-shadow: 0 16px 26px -14px rgba(5, 20, 60, .7); transform: rotate(-6deg); }
.af-cp__ico span { font-size: 2.1rem; }
.af-cp__ico b { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--af-naranja); color: #fff; font-family: var(--af-f-titulo); font-weight: 400; border: 3px solid #fff; font-size: .95rem; }
.af-cp__paso h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.35rem; margin: 0 0 4px; color: #fff; }
.af-cp__paso p { margin: 0; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.af-cp__envio { list-style: none; margin: 0 auto clamp(18px, 3vh, 28px); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.af-cp__envio li { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--af-oscuro); border-radius: 999px; padding: 8px 18px 8px 8px; box-shadow: 0 12px 22px -14px rgba(5, 20, 60, .7); }
.af-cp__envio .af-ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--af-naranja); color: #fff; }
.af-cp__envio span { display: flex; flex-direction: column; font-size: .76rem; color: var(--af-gris); line-height: 1.2; }
.af-cp__envio strong { font-family: var(--af-f-sub); font-size: .9rem; color: var(--af-oscuro); }

/* 4 · ¿Por qué Animal Food? (blanco) */
.af-pq__grid { list-style: none; margin: 0 auto clamp(20px, 3vh, 32px); padding: 0; max-width: 1240px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.af-pq__item { display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid #e6eefb; border-radius: 22px; padding: 16px 18px; transition: transform .25s, border-color .25s, box-shadow .25s; }
.af-pq__item:hover { transform: translateY(-4px); border-color: var(--af-naranja); box-shadow: 0 20px 34px -24px rgba(15, 35, 80, .6); }
.af-pq__ico { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 1.7rem; background: linear-gradient(145deg, #fff, #ffe9c9); box-shadow: inset 0 -4px 0 rgba(255, 122, 0, .15); }
.af-pq__item:nth-child(even) .af-pq__ico { background: linear-gradient(145deg, #fff, #dcecff); box-shadow: inset 0 -4px 0 rgba(23, 105, 224, .15); }
.af-pq__item h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.25rem; color: var(--af-oscuro); margin: 0 0 2px; }
.af-pq__item p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--af-gris); }

/* 6 · Guía de porciones en blanco */
.af-portada #porciones.af-pp { background: #fff; }
.af-pp .af-guia { box-shadow: 0 0 0 1px rgba(15, 35, 80, .06), 0 40px 70px -40px rgba(15, 35, 80, .55); }
.af-pp__acc { margin-top: clamp(18px, 3vh, 28px); }

@media (max-width: 1000px) {
	.af-cp__pasos { grid-template-columns: 1fr; gap: 10px; max-width: 560px; margin-inline: auto; }
	.af-cp__paso:not(:last-child)::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -16px; transform: translateX(-50%); }
	.af-pq__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.af-cp__paso { padding: 12px 14px; gap: 12px; border-radius: 18px; }
	.af-cp__ico { width: 52px; height: 52px; border-radius: 16px; }
	.af-cp__ico span { font-size: 1.5rem; }
	.af-cp__ico b { width: 22px; height: 22px; font-size: .75rem; border-width: 2px; }
	.af-cp__paso h3 { font-size: 1.1rem; }
	.af-cp__paso p { font-size: .8rem; }
	.af-cp__envio { gap: 6px; }
	.af-cp__envio li { padding: 6px 12px 6px 6px; }
	.af-cp__envio .af-ico { width: 28px; height: 28px; padding: 6px; }
	.af-pq__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.af-pq__item { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 18px; }
	.af-pq__ico { width: 42px; height: 42px; font-size: 1.25rem; border-radius: 14px; }
	.af-pq__item h3 { font-size: 1.02rem; }
	.af-pq__item p { font-size: .76rem; }
}

/* ===== Animaciones de los bloques nuevos (como los originales) ===== */
.af-portada #como-pedir { position: relative; }
.af-cp__pasos { position: relative; }
.af-cp__pasos::before { /* línea punteada que avanza detrás de los pasos */
	content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 4px; transform: translateY(-50%); z-index: 0; border-radius: 4px;
	background: repeating-linear-gradient(90deg, #ffb84d 0 12px, transparent 12px 24px); background-size: 48px 4px; animation: af-cp-hormigas 1.2s linear infinite;
}
@keyframes af-cp-hormigas { to { background-position: 48px 0; } }
.af-cp__paso { z-index: 1; background: rgba(12, 60, 140, .55); }
.af-cp__ico { animation: af-flota 4s ease-in-out infinite; }
.af-cp__paso:nth-child(2) .af-cp__ico { animation-delay: -1.3s; }
.af-cp__paso:nth-child(3) .af-cp__ico { animation-delay: -2.6s; }
.af-cp__ico span { display: inline-block; animation: af-bota 3s ease-in-out infinite; }
.af-cp__paso:not(:last-child)::after { animation: af-cp-flecha 1.4s ease-in-out infinite; }
@keyframes af-cp-flecha { 0%, 100% { margin-right: 0; box-shadow: 0 0 0 0 rgba(255, 156, 0, .6); } 50% { margin-right: -4px; box-shadow: 0 0 0 6px rgba(255, 156, 0, 0); } }
.af-cp__envio li { animation: af-pill 3s ease-in-out infinite; }
.af-cp__envio li:nth-child(2) { animation-delay: .3s; }
.af-cp__envio li:nth-child(3) { animation-delay: .6s; }
.af-cp__envio .af-ico { animation: af-pulso 2s infinite; }

.af-pq__ico { animation: af-bota 3.2s ease-in-out infinite; }
.af-pq__item:nth-child(2) .af-pq__ico { animation-delay: -.5s; }
.af-pq__item:nth-child(3) .af-pq__ico { animation-delay: -1s; }
.af-pq__item:nth-child(4) .af-pq__ico { animation-delay: -1.5s; }
.af-pq__item:nth-child(5) .af-pq__ico { animation-delay: -2s; }
.af-pq__item:nth-child(6) .af-pq__ico { animation-delay: -2.5s; }
.af-pq__item:hover .af-pq__ico { animation-duration: 1s; }

@media (max-width: 1000px) {
	.af-cp__pasos::before { left: 50%; right: auto; top: 4%; bottom: 4%; width: 4px; height: auto; transform: translateX(-50%);
		background: repeating-linear-gradient(180deg, #ffb84d 0 12px, transparent 12px 24px); background-size: 4px 48px; animation-name: af-cp-hormigas-v; }
	@keyframes af-cp-hormigas-v { to { background-position: 0 48px; } }
}
@media (prefers-reduced-motion: reduce) {
	.af-cp__pasos::before, .af-cp__ico, .af-cp__ico span, .af-cp__envio li, .af-pq__ico { animation: none !important; }
}

/* ===== Ingredientes con foto (v1.28) ===== */
.af-ig__em img, .af-ing__em img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.af-ig__em:has(img) { overflow: hidden; padding: 0; }
.af-ig__plato--foto { overflow: hidden; }
.af-ig__plato--foto > span { display: block; width: 100%; height: 100%; animation: none; filter: none; }
.af-ig__plato--foto img { width: 100%; height: 100%; object-fit: cover; display: block; animation: af-ig-zoom 9s ease-in-out infinite alternate; }
@keyframes af-ig-zoom { from { transform: scale(1.02) rotate(-1.5deg); } to { transform: scale(1.12) rotate(1.5deg); } }
.af-ig__panel.is-on .af-ig__plato--foto { animation: af-ig-entra .6s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes af-ig-entra { from { transform: scale(.82) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.af-ing__bubble img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .af-ig__plato--foto img, .af-ig__panel.is-on .af-ig__plato--foto { animation: none; } }