/* =========================================================
   ANIMAL FOOD · QUIÉNES SOMOS
   Encabezado azul con el perrito del logo flotando en 3 piezas.
   ========================================================= */
.af-page-quienes-somos .af-wrap { width: min(1400px, 100% - 2 * clamp(16px, 3.2vw, 64px)); }

/* ================= Encabezado ================= */
.af-qhero {
	position: relative; overflow: hidden; color: #fff;
	padding: clamp(36px, 6vh, 70px) 0 clamp(90px, 10vw, 130px);
	background: var(--af-grano), radial-gradient(55% 70% at 90% 30%, rgba(56, 182, 255, .55), transparent 62%), radial-gradient(45% 60% at 0% 100%, rgba(255, 156, 0, .22), transparent 60%), linear-gradient(150deg, #1769e0 0%, #1155c9 45%, #0c3c8c 100%);
}
.af-qhero .af-deco { color: #fff; opacity: .1; }
.af-qhero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 70px); align-items: center; }
.af-qhero__t { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(2.3rem, 4.6vw, 4.4rem); line-height: 1.02; color: #fff; margin: 0 0 16px; text-shadow: 0 6px 30px rgba(12, 60, 140, .35); }
.af-qhero__t em { font-style: normal; color: var(--af-naranja); }
.af-qhero__p { font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.65; color: rgba(255, 255, 255, .9); margin: 0 0 24px; max-width: 600px; }
.af-qhero__media { display: grid; place-items: center; }

/* ================= Perrito flotante ================= */
.af-mascota {
	--mx: 0; --my: 0;
	position: relative; width: min(100%, 560px, 62vh); aspect-ratio: 612 / 490; margin: 4% auto 0;
}
.af-mascota__halo { position: absolute; inset: -8% 4% -2%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .28) 0 38%, rgba(255, 156, 0, .18) 52%, transparent 68%); animation: af-m-halo 5s ease-in-out infinite; }
.af-mascota__aro { position: absolute; inset: -4% 10% 2%; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .35); animation: af-giro 40s linear infinite; }
.af-mascota__sombra { position: absolute; left: 26%; right: 26%; bottom: -6%; height: 7%; border-radius: 50%; background: rgba(5, 20, 60, .35); filter: blur(8px); animation: af-m-sombra 4s ease-in-out infinite; }

/* Cada pieza: la capa se mueve con el mouse (profundidad) y la imagen flota */
.af-mascota__capa { position: absolute; display: block; translate: calc(var(--mx) * var(--prof) * 1px) calc(var(--my) * var(--prof) * 1px); transition: translate .25s ease-out; }
.af-mascota__capa--cara { left: 11.76%; top: 0; width: 70.59%; z-index: 2; }
.af-mascota__capa--izq { left: 0; top: 24.49%; width: 26.31%; z-index: 3; }
.af-mascota__capa--der { left: 71.24%; top: 24.29%; width: 28.76%; z-index: 3; }
.af-mascota__pz, .af-mascota__pz img { display: block; width: 100%; height: auto; }
.af-mascota__pz img { filter: drop-shadow(0 14px 18px rgba(5, 20, 60, .3)); }

.af-mascota__cara { animation: af-m-cara 4s ease-in-out infinite; transform-origin: 50% 80%; }
.af-mascota__mano--izq { animation: af-m-izq 3.2s ease-in-out infinite; transform-origin: 60% 90%; }
.af-mascota__mano--der { animation: af-m-der 3.6s ease-in-out infinite -1.2s; transform-origin: 40% 90%; }

@keyframes af-m-cara {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-14px) rotate(2deg); }
}
@keyframes af-m-izq {
	0%, 100% { transform: translate(-6%, 6%) rotate(-10deg); }
	50% { transform: translate(-12%, -8%) rotate(4deg); }
}
@keyframes af-m-der {
	0%, 100% { transform: translate(6%, 6%) rotate(10deg); }
	50% { transform: translate(12%, -8%) rotate(-4deg); }
}
@keyframes af-m-sombra { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.82); opacity: .6; } }
@keyframes af-m-halo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Al pasar el mouse: el perrito "celebra" moviendo los cubiertos más rápido */
.af-mascota:hover .af-mascota__mano--izq { animation-duration: 1.1s; }
.af-mascota:hover .af-mascota__mano--der { animation-duration: 1.2s; }
.af-mascota:hover .af-mascota__cara { animation-duration: 1.6s; }

/* Detalles */
.af-mascota__chispa { position: absolute; z-index: 4; font-size: clamp(1.4rem, 2.4vw, 2rem); animation: af-m-chispa 3s ease-in-out infinite; }
.af-mascota__chispa--1 { left: -2%; top: 2%; }
.af-mascota__chispa--2 { right: -10%; top: 6%; animation-delay: -1s; }
.af-mascota__chispa--3 { left: 40%; bottom: -12%; animation-delay: -2s; }
@keyframes af-m-chispa { 0%, 100% { transform: translateY(0) scale(1) rotate(0); opacity: .9; } 50% { transform: translateY(-10px) scale(1.15) rotate(12deg); opacity: 1; } }
.af-mascota__globo {
	position: absolute; z-index: 5; left: 58%; top: -6%; 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 18px 4px; box-shadow: 0 14px 26px -12px rgba(5, 20, 60, .6);
	animation: af-m-globo 4s ease-in-out infinite;
}
@keyframes af-m-globo { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

/* ================= Valores sobre azul (alterna con los blancos) ================= */
.af-sec.af-qs-azul { background: var(--af-fondo-azul); }
.af-qs-azul .af-h2 { color: #fff; }
.af-qs-azul .af-kicker { color: #fff; background: rgba(255, 255, 255, .16); }


/* =========================================================
   BLOQUES DE LA PÁGINA (cada uno cabe en una pantalla)
   ========================================================= */
.af-page-quienes-somos .af-sec, .af-qv, .af-qp, .af-qpr { padding-block: clamp(40px, 7vh, 84px); }
.af-qs-azul .af-lead { color: rgba(255, 255, 255, .88); }
.af-qs-azul .af-grad { background: linear-gradient(90deg, #ffd27a, #ff9c00); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ================= Valores ================= */
.af-qv__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.af-qv__sello { position: relative; width: min(100%, 420px, 52vh); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.af-qv__texto { position: absolute; inset: 0; width: 100%; height: 100%; animation: af-giro 26s linear infinite; overflow: visible; }
.af-qv__texto text { font-family: var(--af-f-titulo); font-size: 20px; fill: #fff; }
.af-qv__aro { position: absolute; inset: 15%; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .4); animation: af-giro 40s linear infinite reverse; }
.af-qv__emblema { position: relative; width: 58%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(255, 255, 255, .15), 0 30px 50px -20px rgba(5, 20, 60, .7); animation: af-flota2 5s ease-in-out infinite; }
.af-qv__emblema picture, .af-qv__emblema img { display: block; width: 84%; height: auto; margin: auto; }
.af-qv__orb { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.5rem; box-shadow: 0 12px 22px -12px rgba(5, 20, 60, .6); animation: af-ingflot 4s ease-in-out infinite; }
.af-qv__orb--1 { top: 6%; left: 8%; }
.af-qv__orb--2 { top: 12%; right: 4%; animation-delay: -1s; }
.af-qv__orb--3 { bottom: 10%; left: 2%; animation-delay: -2s; }
.af-qv__orb--4 { bottom: 4%; right: 12%; animation-delay: -3s; }
.af-qv__txt .af-h2 { margin-bottom: clamp(14px, 2.4vh, 24px); }
.af-qv__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: v; }
.af-qv__item {
	position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
	background: #fff; border-radius: 26px; padding: 16px 20px; color: var(--af-texto);
	box-shadow: 0 22px 40px -26px rgba(5, 20, 60, .8); transition: transform .3s;
}
.af-qv__item:hover { transform: translateX(8px); }
.af-qv__item--n { background: var(--af-grano), radial-gradient(80% 90% at 100% 0%, #ffc15a, transparent 60%), linear-gradient(140deg, var(--af-naranja), var(--af-naranja-2)); color: #fff; margin-left: clamp(0px, 3vw, 40px); }
.af-qv__item:not(.af-qv__item--n) { margin-right: clamp(0px, 3vw, 40px); }
.af-qv__ico { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 22px; background: var(--af-azul); box-shadow: inset 0 -5px 0 rgba(23, 105, 224, .14); font-size: 2rem; }
.af-qv__ico span { animation: af-bota 3s ease-in-out infinite; }
.af-qv__item:nth-child(2) .af-qv__ico span { animation-delay: -1s; }
.af-qv__item:nth-child(3) .af-qv__ico span { animation-delay: -2s; }
.af-qv__item--n .af-qv__ico { background: rgba(255, 255, 255, .22); box-shadow: none; }
.af-qv__item h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(1.35rem, 1.9vw, 1.65rem); color: var(--af-oscuro); margin: 0 0 3px; }
.af-qv__item--n h3 { color: #fff; }
.af-qv__item p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--af-gris); }
.af-qv__item--n p { color: rgba(255, 255, 255, .92); }
.af-qv__item small { align-self: start; font-family: var(--af-f-sub); font-weight: 600; font-size: .74rem; color: var(--af-azul-p); background: var(--af-azul); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.af-qv__item--n small { background: rgba(255, 255, 255, .22); color: #fff; }

/* ================= Así trabajamos ================= */
.af-qp__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.af-qp__media { position: relative; width: min(100%, 500px); margin: 0 auto; }
.af-qp__blob { position: absolute; inset: -6% -4% -8% -6%; background: linear-gradient(135deg, var(--af-naranja), #ffc466); border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; animation: af-blob 12s ease-in-out infinite; opacity: .9; }
.af-qp__foto { position: relative; border-radius: 34px; overflow: hidden; border: 8px solid #fff; transform: rotate(-2.5deg); box-shadow: 0 34px 60px -30px rgba(15, 35, 80, .7); }
.af-qp__foto img, .af-qp__foto .af-ph { display: block; width: 100%; aspect-ratio: 4 / 3.4; max-height: 58vh; object-fit: cover; }
.af-qp__chip { position: absolute; z-index: 2; background: #fff; color: var(--af-oscuro); font-family: var(--af-f-sub); font-weight: 600; font-size: .9rem; padding: 9px 16px; border-radius: 999px; box-shadow: 0 14px 26px -12px rgba(15, 35, 80, .55); white-space: nowrap; animation: af-ingflot 4.5s ease-in-out infinite; }
.af-qp__chip--1 { top: 6%; left: -6%; }
.af-qp__chip--2 { bottom: 8%; right: -6%; animation-delay: -2s; }
.af-qp__vapor { position: absolute; z-index: 2; left: 46%; top: -12%; display: flex; gap: 12px; }
.af-qp__vapor i { width: 10px; height: 50px; border-radius: 10px; background: linear-gradient(to top, rgba(255, 156, 0, .55), transparent); animation: af-vapor 2.4s ease-in-out infinite; }
.af-qp__vapor i:nth-child(2) { animation-delay: .7s; height: 64px; }
.af-qp__vapor i:nth-child(3) { animation-delay: 1.4s; }

.af-qp__txt .af-h2 { margin-bottom: clamp(14px, 2.4vh, 24px); }
.af-qp__ruta { position: relative; list-style: none; margin: 0; padding: 0 0 0 52px; display: grid; gap: clamp(10px, 1.6vh, 16px); }
.af-qp__ruta::before { /* camino punteado que avanza */
	content: ''; position: absolute; left: 20px; top: 20px; bottom: 20px; width: 4px; border-radius: 4px;
	background: repeating-linear-gradient(180deg, var(--af-naranja) 0 12px, transparent 12px 24px); background-size: 4px 48px; animation: af-qp-camino 1.2s linear infinite;
}
@keyframes af-qp-camino { to { background-position: 0 48px; } }
.af-qp__ruta::after { /* la moto que lleva el pedido */
	content: '🛵'; position: absolute; left: 3px; top: 10px; font-size: 1.7rem; z-index: 2; filter: drop-shadow(0 6px 6px rgba(15, 35, 80, .3));
	animation: af-qp-moto 7s ease-in-out infinite;
}
@keyframes af-qp-moto { 0% { top: 0; opacity: 0; } 8%, 88% { opacity: 1; } 100% { top: calc(100% - 40px); opacity: 0; } }
.af-qp__paso { position: relative; display: flex; align-items: center; gap: 18px; background: #fff; border: 2px solid #e6eefb; border-radius: 24px; padding: 12px 18px 12px 12px; transition: border-color .25s, transform .25s, box-shadow .25s; }
.af-qp__paso:hover { border-color: var(--af-naranja); transform: translateX(6px); box-shadow: 0 20px 34px -24px rgba(15, 35, 80, .6); }
.af-qp__ico { position: relative; flex: none; width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; font-size: 1.8rem; background: linear-gradient(145deg, #fff, #ffe9c9); box-shadow: inset 0 -4px 0 rgba(255, 122, 0, .15); }
.af-qp__paso:nth-child(even) .af-qp__ico { background: linear-gradient(145deg, #fff, #dcecff); box-shadow: inset 0 -4px 0 rgba(23, 105, 224, .15); }
.af-qp__ico span { animation: af-bota 3.2s ease-in-out infinite; }
.af-qp__paso:nth-child(2) .af-qp__ico span { animation-delay: -.8s; }
.af-qp__paso:nth-child(3) .af-qp__ico span { animation-delay: -1.6s; }
.af-qp__paso:nth-child(4) .af-qp__ico span { animation-delay: -2.4s; }
.af-qp__ico b { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--af-azul-p); color: #fff; font-family: var(--af-f-titulo); font-weight: 400; font-size: .85rem; border: 3px solid #fff; }
.af-qp__paso h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--af-oscuro); margin: 0 0 2px; }
.af-qp__paso p { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--af-gris); }

/* ================= Lo que sí y lo que nunca ================= */
.af-qpr__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: stretch; max-width: 1080px; margin: 0 auto; }
.af-qpr__card { background: #fff; border-radius: 32px; padding: clamp(20px, 2.6vw, 32px); color: var(--af-texto); box-shadow: 0 30px 60px -34px rgba(5, 20, 60, .8); position: relative; }
.af-qpr__card::before { content: ''; position: absolute; inset: 9px; border: 2.5px dashed var(--af-azul-2); border-radius: 25px; pointer-events: none; }
.af-qpr__card--no::before { border-color: #ffd0d0; }
.af-qpr__card h3 { position: relative; display: flex; align-items: center; gap: 10px; font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 1.9rem); color: var(--af-oscuro); margin: 0 0 14px; }
.af-qpr__card ul { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.af-qpr__card li { display: flex; align-items: center; gap: 12px; font-family: var(--af-f-sub); font-weight: 600; font-size: 1rem; color: var(--af-oscuro); background: #f2f8ff; border-radius: 18px; padding: 9px 12px; }
.af-qpr__card--no li { background: #fff4f4; color: var(--af-gris); }
.af-qpr__em { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: #fff; font-size: 1.35rem; flex: none; box-shadow: 0 6px 12px -8px rgba(15, 35, 80, .4); }
.af-qpr__card--no .af-qpr__em { filter: grayscale(.4); }
.af-qpr__card s { text-decoration-thickness: 3px; text-decoration-color: #ff5a5a; }
.af-qpr__marca { margin-left: auto; font-style: normal; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #25d366; font-size: .9rem; font-weight: 700; }
.af-qpr__card--no .af-qpr__marca { background: #ff5a5a; }
[data-reveal].is-in .af-qpr__marca { animation: af-qpr-pop .5s cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: calc(.4s + var(--d) * .15s); }
@keyframes af-qpr-pop { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
.af-qpr__card li { animation: af-pill 3.4s ease-in-out infinite; animation-delay: calc(var(--d) * .3s); }
.af-qpr__plato { align-self: center; position: relative; display: grid; place-items: center; width: clamp(90px, 10vw, 130px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .2), 0 0 0 22px rgba(255, 255, 255, .08); }
.af-qpr__bowl { font-size: clamp(2.6rem, 4vw, 3.6rem); animation: af-bota 2.8s ease-in-out infinite; }
.af-qpr__vs { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-family: var(--af-f-titulo); font-size: 1rem; color: #fff; background: var(--af-naranja); border-radius: 999px; padding: 4px 12px; box-shadow: 0 8px 16px -8px rgba(255, 122, 0, .9); }

@media (max-width: 960px) {
	.af-qv__grid, .af-qp__grid { grid-template-columns: 1fr; }
	.af-qv__txt, .af-qp__txt { text-align: center; }
	.af-qv__sello { width: min(70vw, 280px); }
	.af-qv__lista, .af-qp__ruta { text-align: left; max-width: 620px; margin-inline: auto; }
	.af-qv__item--n, .af-qv__item:not(.af-qv__item--n) { margin: 0; }
	.af-qp__media { width: min(100%, 420px); }
	.af-qp__foto img, .af-qp__foto .af-ph { max-height: 34vh; }
	.af-qpr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.af-qpr__plato { display: none; }
}
@media (max-width: 600px) {
	.af-qv__sello { width: min(64vw, 230px); }
	.af-qv__texto text { font-size: 22px; }
	.af-qv__orb { width: 38px; height: 38px; font-size: 1.1rem; }
	.af-qv__item { grid-template-columns: auto 1fr; gap: 12px; padding: 12px 14px; border-radius: 20px; }
	.af-qv__item small { display: none; }
	.af-qv__ico { width: 50px; height: 50px; font-size: 1.5rem; border-radius: 16px; }
	.af-qv__item p { font-size: .85rem; }
	.af-qp__chip { font-size: .75rem; padding: 7px 11px; }
	.af-qp__chip--1 { left: -2%; }
	.af-qp__chip--2 { right: -2%; }
	.af-qp__ruta { padding-left: 38px; }
	.af-qp__ruta::before { left: 14px; }
	.af-qp__ruta::after { left: 0; font-size: 1.35rem; }
	.af-qp__paso { gap: 12px; padding: 10px 12px 10px 10px; border-radius: 18px; }
	.af-qp__ico { width: 48px; height: 48px; font-size: 1.4rem; border-radius: 16px; }
	.af-qp__paso p { font-size: .82rem; }
	.af-qpr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
	.af-qpr__card { padding: 16px 10px; border-radius: 22px; }
	.af-qpr__card::before { inset: 5px; border-radius: 18px; }
	.af-qpr__card h3 { font-size: 1.1rem; gap: 6px; }
	.af-qpr__card ul { gap: 6px; }
	.af-qpr__card li { font-size: .78rem; gap: 6px; padding: 6px 6px; border-radius: 12px; }
	.af-qpr__em { width: 28px; height: 28px; font-size: 1rem; border-radius: 9px; }
	.af-qpr__marca { width: 20px; height: 20px; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
	.af-qv *, .af-qp *, .af-qp__ruta::before, .af-qp__ruta::after, .af-qpr * { animation: none !important; }
}

/* ================= Responsive ================= */
@media (max-width: 900px) {
	.af-qhero__grid { grid-template-columns: 1fr; text-align: center; }
	.af-qhero__p { margin-inline: auto; }
	.af-qhero .af-btns { justify-content: center; }
	.af-qhero__media { order: -1; }
	.af-mascota { width: min(78vw, 340px); margin-top: 18px; }
	.af-mascota__globo { left: 50%; top: -14%; }
}
@media (max-width: 600px) {
	.af-qhero { padding-bottom: 80px; }
	.af-qhero__t { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
	.af-qhero__p { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
	.af-mascota *, .af-mascota { animation: none !important; transition: none !important; }
	.af-mascota__capa { translate: none; }
}

/* Lo que sí / lo que nunca: el contenido nunca se sale de su tarjeta */
.af-qpr__card, .af-qpr__card ul, .af-qpr__card li { min-width: 0; }
.af-qpr__card li > s, .af-qpr__card li > .af-qpr__txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.af-qpr__em, .af-qpr__marca { flex: none; }
@media (max-width: 600px) {
	.af-qpr__card li { gap: 5px !important; padding: 6px 5px !important; font-size: .74rem !important; line-height: 1.2; }
	.af-qpr__card s { text-decoration-thickness: 2px; }
	.af-qpr__em { width: 24px !important; height: 24px !important; font-size: .85rem !important; border-radius: 8px !important; }
	.af-qpr__marca { width: 18px !important; height: 18px !important; font-size: .62rem !important; }
}