/* =========================================================
   ANIMAL FOOD · VIDEO "ADIÓS CROQUETAS"
   ========================================================= */
.af-vbtn {
	display: inline-flex; align-items: center; gap: 12px; cursor: pointer; text-align: left;
	background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 18px; padding: 6px 16px 6px 6px;
	color: #fff; font: inherit; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transition: background .25s, transform .25s, border-color .25s;
}
.af-vbtn:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); border-color: #fff; }
.af-vbtn__mini { position: relative; flex: none; width: 92px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 16px -8px rgba(5, 20, 60, .7); }
.af-vbtn__mini img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.af-vbtn:hover .af-vbtn__mini img { transform: scale(1.08); }
.af-vbtn__mini i { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 20, 60, .25); }
.af-vbtn__mini i::before {
	content: ''; width: 30px; height: 30px; border-radius: 50%; background: var(--af-naranja);
	box-shadow: 0 0 0 0 rgba(255, 156, 0, .7); animation: af-vbtn-pulso 1.8s infinite;
}
.af-vbtn__mini i::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -3px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
@keyframes af-vbtn-pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 156, 0, .7); } 100% { box-shadow: 0 0 0 14px rgba(255, 156, 0, 0); } }
.af-vbtn__txt { display: flex; flex-direction: column; line-height: 1.2; }
.af-vbtn__txt strong { font-family: var(--af-f-sub); font-weight: 700; font-size: .95rem; }
.af-vbtn__txt small { font-size: .78rem; opacity: .85; }
/* Versión para fondo blanco (shortcode) */
.af-vbtn--claro { background: #fff; border-color: #e6eefb; color: var(--af-oscuro); box-shadow: 0 16px 30px -24px rgba(15, 35, 80, .7); }
.af-vbtn--claro:hover { background: #fff; border-color: var(--af-naranja); }
.af-vbtn--claro .af-vbtn__txt small { color: var(--af-gris); opacity: 1; }

/* Beneficios: debajo de los botones del encabezado */
.af-bhero .af-vbtn { margin-top: 14px; }
/* Portada: flotando en la esquina de la foto, sin hacer más alto el encabezado */
.af-vbtn--hero { position: absolute; z-index: 6; left: -2%; bottom: -1%; background: var(--af-oscuro); border: 3px solid #fff; box-shadow: 0 16px 30px -14px rgba(5, 20, 60, .8); animation: af-ingflot 5s ease-in-out infinite; animation-delay: -2.5s; }
.af-vbtn--hero:hover { background: var(--af-azul-p); }

/* Ventana */
.af-vmodal { border: 0; padding: 0; background: transparent; width: min(960px, 100% - 24px); max-width: none; max-height: none; overflow: visible; }
.af-vmodal::backdrop { background: rgba(8, 20, 50, .82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.af-vmodal[open] { animation: af-vmodal-entra .35s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes af-vmodal-entra { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.af-vmodal__caja { position: relative; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.af-vmodal__video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; background: #000; }
.af-vmodal__cerrar {
	position: absolute; z-index: 2; top: 12px; right: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255, 255, 255, .95); color: var(--af-oscuro); font-size: 1.1rem; font-weight: 700; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6); transition: transform .2s;
}
.af-vmodal__cerrar:hover { transform: rotate(90deg); }
.af-vmodal__pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; }
.af-vmodal__pie p { margin: 0; color: var(--af-gris); font-size: .95rem; }
.af-vmodal__pie strong { display: block; color: var(--af-oscuro); font-family: var(--af-f-sub); }
.af-vmodal__pie .af-btns { gap: 8px; }
.af-vmodal__pie .af-btn { padding: 12px 18px; font-size: .9rem; }
html.af-vmodal-abierto { overflow: hidden; }

@media (max-width: 600px) {
	.af-vbtn { padding-right: 12px; }
	.af-vbtn__mini { width: 74px; }
	.af-vmodal { width: calc(100% - 16px); }
	.af-vmodal__caja { border-radius: 18px; }
	.af-vmodal__pie { padding: 12px; }
	.af-vmodal__pie .af-btns { width: 100%; }
	.af-vmodal__pie .af-btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .af-vbtn__mini i::before, .af-vmodal[open] { animation: none; } }

/* El puntero de huellita no puede pasar por encima de una ventana modal (la ventana
   va en la capa superior del navegador), así que mientras el video está abierto se
   usa el puntero normal y se ocultan la huellita, su halo y el rastro. */
html.af-vmodal-abierto, html.af-vmodal-abierto *,
html.af-con-cursor.af-vmodal-abierto, html.af-con-cursor.af-vmodal-abierto * { cursor: auto !important; }
html.af-con-cursor.af-vmodal-abierto a, html.af-con-cursor.af-vmodal-abierto button,
html.af-con-cursor.af-vmodal-abierto video { cursor: pointer !important; }
html.af-vmodal-abierto .af-puntero, html.af-vmodal-abierto .af-puntero-halo, html.af-vmodal-abierto .af-huella { display: none !important; }

/* =========================================================
   Reproductor grande "Animal Food TV" (portada · ¿Por qué Animal Food?)
   ========================================================= */
.af-pq__cuerpo--video { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 3vw, 44px); align-items: center; max-width: 1240px; margin: 0 auto clamp(20px, 3vh, 32px); }
.af-pq__cuerpo--video .af-pq__grid { grid-template-columns: 1fr; gap: 10px; margin: 0; max-width: none; }
.af-pq__cuerpo--video .af-pq__item { padding: 10px 14px; gap: 12px; border-radius: 18px; }
.af-pq__cuerpo--video .af-pq__ico { width: 48px; height: 48px; font-size: 1.4rem; border-radius: 15px; }
.af-pq__cuerpo--video .af-pq__item h3 { font-size: 1.12rem; }
.af-pq__cuerpo--video .af-pq__item p { font-size: .82rem; }

.af-vtv { position: relative; }
.af-vtv__marco {
	position: relative; border-radius: 30px; overflow: hidden; background: #000; aspect-ratio: 16 / 9;
	border: 8px solid var(--af-oscuro); box-shadow: 0 0 0 4px var(--af-naranja), 0 40px 70px -34px rgba(15, 35, 80, .85);
	transform: rotate(-1.2deg); transition: transform .4s;
}
.af-vtv:hover .af-vtv__marco { transform: rotate(0deg) scale(1.01); }
.af-vtv::before { /* manchita naranja detrás, como en el resto del sitio */
	content: ''; position: absolute; inset: 8% -4% -6% 8%; z-index: -1; border-radius: 40px;
	background: linear-gradient(135deg, var(--af-naranja), #ffc466); transform: rotate(3deg); opacity: .9;
}
.af-vtv__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.af-vtv__rec {
	position: absolute; z-index: 3; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px;
	background: rgba(15, 35, 80, .78); color: #fff; font-family: var(--af-f-sub); font-weight: 700; font-size: .76rem; letter-spacing: .06em;
	padding: 6px 12px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .3s;
}
.af-vtv__rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff3d3d; animation: af-vtv-rec 1.2s ease-in-out infinite; }
@keyframes af-vtv-rec { 50% { opacity: .25; } }
.af-vtv__play {
	position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	border: 0; cursor: pointer; background: radial-gradient(circle at 50% 50%, rgba(15, 35, 80, .1), rgba(15, 35, 80, .55)); color: #fff; font: inherit;
	transition: opacity .35s, visibility .35s;
}
.af-vtv__bola {
	position: relative; display: grid; place-items: center; width: clamp(78px, 9vw, 108px); aspect-ratio: 1; border-radius: 50%;
	background: linear-gradient(135deg, var(--af-naranja), var(--af-naranja-2)); border: 5px solid #fff;
	box-shadow: 0 0 0 0 rgba(255, 156, 0, .7), 0 18px 30px -12px rgba(0, 0, 0, .6); animation: af-vtv-late 1.8s infinite;
	transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.af-vtv__bola i { margin-left: 7px; border-left: 30px solid #fff; border-top: 19px solid transparent; border-bottom: 19px solid transparent; }
@keyframes af-vtv-late { 0% { box-shadow: 0 0 0 0 rgba(255, 156, 0, .75), 0 18px 30px -12px rgba(0, 0, 0, .6); } 100% { box-shadow: 0 0 0 26px rgba(255, 156, 0, 0), 0 18px 30px -12px rgba(0, 0, 0, .6); } }
.af-vtv__play:hover .af-vtv__bola { transform: scale(1.12); }
.af-vtv__etq { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; color: var(--af-gris); border-radius: 16px; padding: 8px 16px; font-size: .8rem; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); }
.af-vtv__etq strong { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.35rem; color: var(--af-oscuro); line-height: 1; }
.af-vtv.is-reproduciendo .af-vtv__play { opacity: 0; visibility: hidden; }
.af-vtv.is-reproduciendo .af-vtv__rec { opacity: 0; }
.af-vtv__barra { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .25); pointer-events: none; }
.af-vtv__barra i { display: block; height: 100%; width: 0; background: var(--af-naranja); transition: width .25s linear; }
.af-vtv.is-reproduciendo .af-vtv__barra { opacity: 0; }

/* Capítulos */
.af-vtv__caps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.af-vtv__caps button {
	width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "e t" "e x"; align-items: center; column-gap: 10px; text-align: left; cursor: pointer;
	background: #fff; border: 2px solid #e6eefb; border-radius: 16px; padding: 8px 10px; font-family: var(--af-f-sub); font-weight: 600; font-size: .82rem; color: var(--af-oscuro);
	transition: border-color .2s, transform .2s, background .2s;
}
.af-vtv__caps button > span { grid-area: e; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--af-azul); font-size: 1.15rem; }
.af-vtv__caps small { grid-area: t; font-size: .7rem; color: var(--af-gris); font-weight: 700; }
.af-vtv__caps button:hover { border-color: var(--af-naranja); transform: translateY(-2px); }
.af-vtv__caps button.is-on { border-color: var(--af-naranja); background: #fff6e9; }
.af-vtv__caps button.is-on > span { background: var(--af-naranja); }

@media (max-width: 1000px) {
	.af-pq__cuerpo--video { grid-template-columns: 1fr; max-width: 720px; }
	.af-pq__cuerpo--video .af-pq__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.af-vtv__marco { border-width: 5px; border-radius: 20px; }
	.af-vtv__etq { padding: 6px 12px; font-size: .7rem; }
	.af-vtv__etq strong { font-size: 1.05rem; }
	.af-vtv__bola i { margin-left: 5px; border-left-width: 22px; border-top-width: 14px; border-bottom-width: 14px; }
	.af-vtv__caps { gap: 5px; margin-top: 12px; }
	.af-vtv__caps button { grid-template-columns: 1fr; grid-template-areas: "e" "t" "x"; justify-items: center; text-align: center; padding: 6px 4px; font-size: .7rem; row-gap: 2px; }
	.af-vtv__caps button > span { width: 30px; height: 30px; font-size: 1rem; }
	.af-pq__cuerpo--video .af-pq__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .af-vtv__bola, .af-vtv__rec i { animation: none; } .af-vtv__marco { transform: none; } }