/* =========================================================
   ANIMAL FOOD · BENEFICIOS
   ========================================================= */
.af-benef .af-wrap { width: min(1320px, 100% - 2 * clamp(16px, 3.2vw, 56px)); }
.af-benef .af-sec { padding-block: clamp(40px, 7vh, 84px); }
.af-benef .af-head { margin-bottom: clamp(18px, 3.4vh, 36px); }
.af-benef .af-head .af-lead { margin-bottom: 0; }

/* ================= Encabezado ================= */
.af-bhero {
	position: relative; overflow: hidden; color: #fff;
	padding: clamp(34px, 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, .25), transparent 60%), linear-gradient(150deg, #1769e0 0%, #1155c9 45%, #0c3c8c 100%);
}
.af-bhero .af-deco { color: #fff; opacity: .1; }
.af-bhero .af-burbujas span { opacity: .35; }
.af-bhero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 70px); align-items: center; }
.af-bhero__t { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.02; color: #fff; margin: 0 0 16px; text-shadow: 0 6px 30px rgba(12, 60, 140, .35); }
.af-bhero__t em { font-style: normal; color: var(--af-naranja); }
.af-bhero__p { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, .9); margin: 0 0 24px; max-width: 580px; }
.af-bhero__media { display: grid; place-items: center; }
.af-bhero__plato { position: relative; width: min(100%, 440px, 54vh); aspect-ratio: 1; }
.af-bhero__aro { position: absolute; inset: -5%; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .4); animation: af-giro 36s linear infinite; }
.af-bhero__foto { position: absolute; inset: 8%; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--af-naranja), #ffc466); box-shadow: 0 0 0 12px rgba(255, 255, 255, .18), 0 40px 70px -30px rgba(5, 20, 60, .8); animation: af-flota2 6s ease-in-out infinite; }
.af-bhero__foto img, .af-bhero__foto .af-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-bhero__chip {
	position: absolute; z-index: 2; white-space: nowrap; background: #fff; color: var(--af-oscuro);
	font-family: var(--af-f-sub); font-weight: 700; font-size: clamp(.8rem, 1vw, .95rem); padding: 10px 16px; border-radius: 999px;
	box-shadow: 0 16px 28px -14px rgba(5, 20, 60, .7); animation: af-ingflot 4.5s ease-in-out infinite;
}
.af-bhero__chip--1 { top: 4%; left: -6%; }
.af-bhero__chip--2 { top: 26%; right: -10%; animation-delay: -1.1s; }
.af-bhero__chip--3 { bottom: 22%; left: -12%; animation-delay: -2.2s; }
.af-bhero__chip--4 { bottom: 2%; right: -2%; animation-delay: -3.3s; }

/* ================= Beneficios (bento) ================= */
.af-bb__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--af-gap); }
.af-bb__card {
	position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 2px solid #e6eefb; border-radius: 30px;
	padding: clamp(18px, 2vw, 26px); box-shadow: 0 24px 40px -32px rgba(15, 35, 80, .6); transition: border-color .25s, box-shadow .25s; overflow: hidden;
}
.af-bb__card:hover { border-color: var(--af-azul-p); box-shadow: 0 30px 50px -30px rgba(23, 105, 224, .6); }
.af-bb__card--1, .af-bb__card--6 { grid-column: span 2; flex-direction: row; align-items: center; gap: clamp(16px, 2vw, 26px); color: #fff; border-color: transparent; }
.af-bb__card--1 { background: var(--af-grano), radial-gradient(80% 90% at 100% 0%, #ffc15a, transparent 60%), linear-gradient(140deg, var(--af-naranja), var(--af-naranja-2)); }
.af-bb__card--6 { background: var(--af-grano), radial-gradient(70% 90% at 100% 0%, rgba(56, 182, 255, .6), transparent 60%), linear-gradient(140deg, var(--af-azul-p), var(--af-azul-o)); }
.af-bb__ico { flex: none; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; font-size: 2.1rem; background: linear-gradient(145deg, #fff, #dcecff); box-shadow: inset 0 -5px 0 rgba(23, 105, 224, .14); }
.af-bb__card:nth-child(odd):not(.af-bb__card--1) .af-bb__ico { background: linear-gradient(145deg, #fff, #ffe9c9); box-shadow: inset 0 -5px 0 rgba(255, 122, 0, .15); }
.af-bb__card--1 .af-bb__ico, .af-bb__card--6 .af-bb__ico { width: clamp(90px, 9vw, 120px); height: clamp(90px, 9vw, 120px); border-radius: 50%; font-size: clamp(2.8rem, 4vw, 3.6rem); background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .25), 0 18px 30px -16px rgba(5, 20, 60, .6); }
.af-bb__ico span { animation: af-bota 3s ease-in-out infinite; }
.af-bb__card:nth-child(2) .af-bb__ico span { animation-delay: -.5s; }
.af-bb__card:nth-child(3) .af-bb__ico span { animation-delay: -1s; }
.af-bb__card:nth-child(4) .af-bb__ico span { animation-delay: -1.5s; }
.af-bb__card:nth-child(5) .af-bb__ico span { animation-delay: -2s; }
.af-bb__card:nth-child(6) .af-bb__ico span { animation-delay: -2.5s; }
.af-bb__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.af-bb__card h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.1; color: var(--af-oscuro); margin: 0; }
.af-bb__card--1 h3, .af-bb__card--6 h3 { color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.af-bb__card p { margin: 0; color: var(--af-gris); font-size: .95rem; line-height: 1.5; }
.af-bb__card--1 p, .af-bb__card--6 p { color: rgba(255, 255, 255, .92); font-size: 1.05rem; }
.af-bb__card small { margin-top: 6px; font-family: var(--af-f-sub); font-weight: 600; font-size: .76rem; color: var(--af-azul-p); background: var(--af-azul); border-radius: 999px; padding: 5px 11px; }
.af-bb__card--1 small, .af-bb__card--6 small { background: rgba(255, 255, 255, .22); color: #fff; }

/* ================= Nutrientes: tarjetas sin espacio vacío ================= */
@media (min-width: 1101px) {
	body.af-benef .af-nts { grid-template-columns: minmax(0, 440px) minmax(260px, min(340px, 42vh)) minmax(0, 440px); }
	body.af-benef .af-nt { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 14px 16px; }
	body.af-benef .af-nt--izq { grid-template-columns: 1fr auto; }
	body.af-benef .af-nt--izq .af-nt__ico { order: 2; }
	body.af-benef .af-nt__txt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t c" "p c"; align-items: center; column-gap: 14px; }
	body.af-benef .af-nt--izq .af-nt__txt { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "c t" "c p"; }
	body.af-benef .af-nt h3 { grid-area: t; }
	body.af-benef .af-nt p { grid-area: p; margin: 2px 0 0; }
	body.af-benef .af-nt small {
		grid-area: c; align-self: center; margin: 0 !important; max-width: 150px; white-space: normal; text-align: center; line-height: 1.35;
		font-size: .8rem; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--af-oscuro);
	}
}

/* ================= Vísceras sobre azul ================= */
.af-benef #visceras .af-pills li { background: rgba(255, 255, 255, .95); border-color: transparent; }
.af-benef #visceras .af-panel { box-shadow: 0 30px 50px -30px rgba(5, 20, 60, .8); }

/* ================= Perros y gatos ================= */
.af-be__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--af-gap); max-width: 1160px; margin: 0 auto clamp(20px, 3vh, 30px); }
.af-be__card { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(20px, 2.6vw, 32px); color: #fff; box-shadow: 0 30px 60px -30px rgba(15, 35, 80, .6); }
.af-be__card--perro { background: var(--af-grano), radial-gradient(60% 70% at 100% 100%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(140deg, #ffb13d, var(--af-naranja-2)); }
.af-be__card--gato { background: var(--af-grano), radial-gradient(60% 70% at 100% 100%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(140deg, var(--af-cielo), var(--af-azul-o)); }
.af-be__top { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.af-be__avatar { flex: none; display: grid; place-items: center; width: clamp(76px, 8vw, 96px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .25), 0 18px 30px -16px rgba(5, 20, 60, .6); }
.af-be__avatar span { font-size: clamp(2.6rem, 4vw, 3.4rem); animation: af-bota 3.2s ease-in-out infinite; }
.af-be__card--gato .af-be__avatar span { animation-delay: -1.6s; }
.af-be__card h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; color: #fff; margin: 0 0 4px; }
.af-be__top p { margin: 0; color: rgba(255, 255, 255, .92); }
.af-be__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.af-be__card li { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, .95); color: var(--af-gris); border-radius: 18px; padding: 10px 14px; font-size: .92rem; line-height: 1.4; transition: transform .25s; }
.af-be__card li:hover { transform: translateX(6px); }
.af-be__card li > span { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 1.4rem; background: var(--af-azul); }
.af-be__card--perro li > span { background: #fff1dc; }
.af-be__card li strong { display: block; font-family: var(--af-f-sub); font-size: 1rem; color: var(--af-oscuro); }

/* ================= Responsive ================= */
@media (max-width: 1100px) {
	.af-bb__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
	.af-bhero__grid { grid-template-columns: 1fr; text-align: center; }
	.af-bhero__p { margin-inline: auto; }
	.af-bhero .af-btns { justify-content: center; }
	.af-bhero__plato { width: min(66vw, 320px); margin: 10px auto 0; }
	.af-be__grid { grid-template-columns: 1fr; max-width: 620px; }
}
@media (max-width: 600px) {
	.af-bhero { padding-bottom: 80px; }
	.af-bhero__t { font-size: clamp(2rem, 9vw, 2.7rem); }
	.af-bhero__p { font-size: .95rem; }
	.af-bhero__chip { font-size: .72rem; padding: 7px 11px; }
	.af-bhero__chip--1 { left: -10%; }
	.af-bhero__chip--2 { right: -14%; }
	.af-bhero__chip--3 { left: -14%; }
	.af-bb__grid { gap: 10px; }
	.af-bb__card { padding: 14px; border-radius: 22px; gap: 8px; }
	.af-bb__card--1, .af-bb__card--6 { gap: 12px; }
	.af-bb__ico { width: 50px; height: 50px; font-size: 1.5rem; border-radius: 16px; }
	.af-bb__card--1 .af-bb__ico, .af-bb__card--6 .af-bb__ico { width: 70px; height: 70px; font-size: 2.2rem; }
	.af-bb__card h3 { font-size: 1.08rem; }
	.af-bb__card--1 h3, .af-bb__card--6 h3 { font-size: 1.35rem; }
	.af-bb__card p, .af-bb__card--1 p, .af-bb__card--6 p { font-size: .8rem; }
	.af-bb__card small { font-size: .66rem; padding: 4px 8px; }
	.af-be__card { padding: 18px 14px; border-radius: 24px; }
	.af-be__top { gap: 12px; margin-bottom: 12px; }
	.af-be__card li { padding: 8px 10px; font-size: .82rem; gap: 10px; }
	.af-be__card li > span { width: 36px; height: 36px; font-size: 1.15rem; }
	/* Nutrientes: icono junto al título para no dejar una fila vacía */
	body.af-benef .af-nt, body.af-benef .af-nt--izq { flex-direction: row; align-items: flex-start; gap: 8px; padding: 10px; }
	body.af-benef .af-nt__ico { width: 32px; height: 32px; font-size: 1rem; border-radius: 10px; }
	body.af-benef .af-nt h3 { font-size: .95rem; line-height: 1.1; }
	body.af-benef .af-nt p { font-size: .74rem; line-height: 1.3; margin: 2px 0 6px; }
	body.af-benef .af-nt small { font-size: .62rem; padding: 3px 7px; white-space: normal; }
	body.af-benef .af-nts__centro { width: min(140px, 40vw); }
}
@media (prefers-reduced-motion: reduce) {
	.af-bhero__plato *, .af-bb__ico span, .af-be__avatar span { animation: none !important; }
}

/* ================= Proteínas (pestañas) ================= */
.af-bp { position: relative; }
.af-bp__ancla { position: absolute; top: 0; }
.af-bp__caja { position: relative; max-width: 1180px; margin: 0 auto; background: #fff; color: var(--af-texto); border-radius: 36px; padding: clamp(16px, 2.4vw, 30px); box-shadow: 0 40px 80px -40px rgba(5, 20, 60, .8); }
.af-bp__caja::before { content: ''; position: absolute; inset: 10px; border: 3px dashed var(--af-azul-2); border-radius: 28px; pointer-events: none; }
.af-bp__tabs { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.af-bp__tab {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--af-f-sub); font-weight: 700; font-size: .95rem;
	color: var(--af-oscuro); background: #fff; border: 2px solid #dbe7f8; border-radius: 999px; padding: 9px 18px 9px 10px;
	box-shadow: 0 6px 0 #dbe7f8; transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.af-bp__tab span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, #fff); font-size: 1.1rem; }
.af-bp__tab:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 40%, #fff); }
.af-bp__tab.is-on { background: var(--c); border-color: var(--c); color: #fff; transform: translateY(3px); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 60%, #000); }
.af-bp__tab.is-on span { background: #fff; animation: af-bota 2s ease-in-out infinite; }
.af-bp__hint { position: relative; text-align: center; margin: 8px 0 clamp(12px, 2vh, 20px); font-family: var(--af-f-sub); font-size: .8rem; color: var(--af-gris); }

.af-bp__panel { position: relative; display: none; }
.af-bp__panel.is-on { display: grid; animation: af-entra .45s ease both; }
.af-bp__panel:not(.af-bp__panel--v) { grid-template-columns: minmax(200px, .7fr) minmax(0, 1.3fr); gap: clamp(18px, 3.4vw, 46px); align-items: center; }
.af-bp__media { position: relative; width: min(100%, 320px, 40vh); margin: 0 auto; }
.af-bp__foto { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--c) 22%, #fff); box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 18%, #fff), 0 30px 50px -24px rgba(15, 35, 80, .6); }
.af-bp__foto img, .af-bp__foto .af-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-bp__em { position: absolute; right: 2%; bottom: 4%; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #fff; font-size: 2.4rem; box-shadow: 0 14px 24px -12px rgba(15, 35, 80, .6); animation: af-bota 3s ease-in-out infinite; }
.af-bp__lema { display: inline-block; font-family: var(--af-f-sub); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c, var(--af-naranja-2)); background: color-mix(in srgb, var(--c, #ff9c00) 14%, #fff); padding: 5px 12px; border-radius: 999px; }
.af-bp__info h3, .af-bv__intro h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1; color: var(--af-oscuro); margin: 8px 0 10px; }
.af-bp__nut { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.af-bp__nut li { font-family: var(--af-f-sub); font-weight: 600; font-size: .8rem; color: var(--af-oscuro); background: var(--af-azul); border-radius: 999px; padding: 5px 12px; }
.af-bp__bens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.af-bp__bens li { display: flex; align-items: flex-start; gap: 10px; background: #f6f9ff; border: 2px solid #e6eefb; border-radius: 18px; padding: 10px 12px; font-size: .86rem; line-height: 1.4; color: var(--af-gris); transition: border-color .25s; }
.af-bp__bens li:hover { border-color: var(--c); }
.af-bp__bens li > span { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff; font-size: 1.2rem; box-shadow: 0 6px 12px -8px rgba(15, 35, 80, .45); }
.af-bp__bens strong { display: block; font-family: var(--af-f-sub); font-size: .95rem; color: var(--af-oscuro); }
.af-bp__dato { margin: 12px 0 0; padding: 10px 14px; border-radius: 16px; background: var(--af-crema); font-size: .88rem; color: var(--af-oscuro); }
.af-bp__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--af-f-sub); font-weight: 700; font-size: .92rem; color: var(--c) !important; text-decoration: none !important; }
.af-bp__link .af-ico { width: 18px; height: 18px; transition: transform .2s; }
.af-bp__link:hover .af-ico { transform: translateX(4px); }

/* Pestaña de vísceras */
.af-bp__panel--v { --c: #e0457b; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .9fr); gap: 14px; align-items: stretch; }
.af-bv__intro { align-self: center; }
.af-bv__intro p { margin: 0 0 10px; color: var(--af-gris); font-size: .95rem; }
.af-bv__grid { display: contents; }
.af-bv__card { position: relative; border-radius: 24px; padding: 16px; }
.af-bv__cant { background: #f4f8ff; }
.af-bv__card h4 { display: flex; align-items: center; gap: 10px; font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.25rem; color: var(--af-oscuro); margin: 0 0 4px; }
.af-bv__card h4 span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff; font-size: 1.15rem; }
.af-bv__sub { margin: 0 0 10px; color: var(--af-gris); font-size: .8rem; }
.af-bv__ley { white-space: nowrap; }
.af-bv__ley i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 6px; vertical-align: middle; background: var(--af-naranja-2); }
.af-bv__ley i.b { background: #ffc36b; }
.af-bv__fila { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: #fff; }
.af-bv__fila + .af-bv__fila { margin-top: 8px; }
.af-bv__ani { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; font-size: 1.5rem; box-shadow: 0 8px 16px -10px rgba(15, 35, 80, .5); }
.af-bv__medida { flex: 1; min-width: 0; }
.af-bv__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.af-bv__top strong { font-family: var(--af-f-sub); font-size: .95rem; color: var(--af-oscuro); }
.af-bv__top b { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--af-naranja-2); }
.af-bv__fila--a .af-bv__top b { color: var(--af-azul-p); }
.af-bv__barra { display: flex; height: 12px; margin: 6px 0 3px; border-radius: 999px; background: #dfeafa; overflow: hidden; }
.af-bv__barra i { display: block; height: 100%; width: 5%; }
.af-bp__panel.is-on .af-bv__barra i { animation: af-bv-crece 1.1s cubic-bezier(.3, 1.2, .5, 1) both .2s; }
@keyframes af-bv-crece { from { width: 0; } }
.af-bv__barra .a { background: var(--af-naranja-2); }
.af-bv__barra .b { background: #ffc36b; }
.af-bv__fila--a .af-bv__barra .a { background: var(--af-azul-p); }
.af-bv__fila--a .af-bv__barra .b { background: var(--af-cielo); }
.af-bv__escala { display: flex; font-family: var(--af-f-sub); font-size: .66rem; color: var(--af-gris); }
.af-bv__escala span:nth-child(1), .af-bv__escala span:nth-child(2) { display: none; }
.af-bv__escala span:nth-child(3) { width: 10%; text-align: right; white-space: nowrap; font-weight: 700; color: var(--af-oscuro); }
.af-bv__escala span:nth-child(4) { flex: 1; text-align: right; }
.af-bv__medida small { display: inline-block; margin-top: 4px; font-family: var(--af-f-sub); font-weight: 600; font-size: .72rem; color: var(--af-oscuro); background: var(--af-crema); border-radius: 999px; padding: 3px 9px; }
.af-bv__ejem { background: var(--af-grano), radial-gradient(80% 80% at 100% 0%, #ffc15a, transparent 60%), linear-gradient(150deg, var(--af-naranja), var(--af-naranja-2)); color: #fff; display: flex; flex-direction: column; gap: 8px; }
.af-bv__ejem h4 { color: #fff; }
.af-bv__ej { flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "a d" "a e"; align-items: center; column-gap: 12px; row-gap: 3px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); border-radius: 18px; padding: 10px 12px; }
.af-bv__ej .af-bv__ani { grid-area: a; }
.af-bv__ej > div { grid-area: d; }
.af-bv__ej small { display: block; font-size: .78rem; opacity: .92; }
.af-bv__ej strong { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.55rem; line-height: 1; }
.af-bv__ej em { grid-area: e; justify-self: start; font-style: normal; font-family: var(--af-f-sub); font-weight: 600; font-size: .72rem; background: #fff; color: var(--af-naranja-2); border-radius: 999px; padding: 3px 9px; }
.af-bv__tips { grid-column: 1 / -1; list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 8px; align-items: center; background: #f4f8ff; border-radius: 20px; }
.af-bv__tips-t { font-family: var(--af-f-titulo); font-size: 1.15rem; color: var(--af-oscuro); padding: 0 8px; white-space: nowrap; }
.af-bv__tips li:not(.af-bv__tips-t) { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 8px 10px; }
.af-bv__tips li > span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--af-azul); font-size: 1.05rem; }
.af-bv__tips p { margin: 0; font-size: .84rem; line-height: 1.35; color: var(--af-gris); }
.af-bv__tips p strong { color: var(--af-oscuro); }

@media (max-width: 1000px) {
	.af-bp__panel--v { grid-template-columns: 1fr 1fr; }
	.af-bv__intro { grid-column: 1 / -1; text-align: center; }
	.af-bv__intro .af-bp__nut { justify-content: center; }
}
@media (max-width: 760px) {
	.af-bp__panel:not(.af-bp__panel--v) { grid-template-columns: 1fr; text-align: center; }
	.af-bp__media { width: min(46vw, 180px); }
	.af-bp__em { width: 50px; height: 50px; font-size: 1.6rem; }
	.af-bp__nut { justify-content: center; }
	.af-bp__bens { text-align: left; }
	.af-bp__panel--v { grid-template-columns: 1fr; }
	.af-bv__tips { grid-template-columns: 1fr; }
	.af-bv__tips-t { text-align: center; }
}
@media (max-width: 600px) {
	.af-bp__caja { border-radius: 26px; padding: 14px 10px; }
	.af-bp__caja::before { inset: 6px; border-radius: 20px; }
	.af-bp__tabs { gap: 6px; }
	.af-bp__tab { font-size: .78rem; padding: 6px 12px 6px 6px; gap: 6px; }
	.af-bp__tab span { width: 24px; height: 24px; font-size: .85rem; }
	.af-bp__info h3, .af-bv__intro h3 { font-size: 1.7rem; }
	.af-bp__bens { grid-template-columns: 1fr; gap: 6px; }
	.af-bp__bens li { padding: 8px 10px; font-size: .8rem; }
	.af-bp__bens li > span { width: 32px; height: 32px; font-size: 1rem; }
	.af-bp__dato { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .af-bp__tab.is-on span, .af-bp__em { animation: none !important; } }