/* =========================================================
   ANIMAL FOOD · MENÚ (header de Blocksy) Y FOOTER
   ========================================================= */

/* ================= HEADER / MENÚ ================= */
.ct-header [data-row="middle"] {
	background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid rgba(15, 35, 80, .07);
	box-shadow: 0 10px 30px -24px rgba(15, 35, 80, .45);
}
.ct-header [data-id="logo"] img,
.ct-header .site-logo-container img { max-height: 62px; width: auto; transition: transform .3s; }
.ct-header [data-id="logo"]:hover img { transform: rotate(-3deg) scale(1.04); }

/* Logo de Animal Food cuando Blocksy muestra el nombre en texto (sin imagen de logo).
   El texto sigue en el HTML para SEO y lectores de pantalla. */
.ct-header [data-id="logo"]:not(:has(img)) .site-title,
#offcanvas [data-id="offcanvas-logo"]:not(:has(img)) .site-title { margin: 0; line-height: 0; }
.ct-header [data-id="logo"]:not(:has(img)) .site-title a,
#offcanvas [data-id="offcanvas-logo"]:not(:has(img)) .site-title a {
	display: block; width: 210px; height: 72px; overflow: hidden; white-space: nowrap; text-indent: 110%;
	background: url("../images/logo-animal-food.png") left center / contain no-repeat;
	transition: transform .3s, width .3s, height .3s;
}
.ct-header [data-id="logo"]:not(:has(img)) .site-title a:hover { transform: rotate(-2deg) scale(1.03); }
.ct-header [data-id="logo"]:not(:has(img)) .site-description { display: none; }
.af-header-fijo [data-id="logo"]:not(:has(img)) .site-title a { width: 134px; height: 46px; }
/* Con imagen de logo, Blocksy también puede imprimir el nombre debajo: se oculta (el logo ya lo dice) */
.ct-header [data-id="logo"]:has(img) .site-title-container,
.ct-header [data-id="logo"]:has(img) .site-title,
.ct-header [data-id="logo"]:has(img) .site-description,
#offcanvas [data-id="offcanvas-logo"]:has(img) .site-title-container { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 999px) {
	.ct-header [data-id="logo"]:not(:has(img)) .site-title a { width: 146px; height: 50px; }
}

/* Lista del menú */
.ct-header [data-id="menu"] > ul,
.ct-header .header-menu-1 > ul { align-items: center; gap: 4px; }
.ct-header [data-id="menu"] > ul > li,
.ct-header .header-menu-1 > ul > li { height: auto; }

/* Enlaces tipo píldora */
.ct-header [data-id="menu"] > ul > li > a,
.ct-header .menu > li > .ct-menu-link {
	position: relative; display: inline-flex; align-items: center; gap: 6px;
	height: auto !important; min-height: 0; padding: 9px 13px !important; border-radius: 999px; white-space: nowrap;
	font-family: var(--af-f-sub); font-weight: 600; font-size: .93rem; letter-spacing: .01em; text-transform: none;
	color: var(--af-oscuro) !important; transition: background .25s, color .25s, transform .25s;
}
.ct-header .menu > li > .ct-menu-link::after { display: none !important; } /* quita el subrayado anterior */
.ct-header [data-id="menu"] > ul > li > a:hover,
.ct-header .menu > li > .ct-menu-link:hover { background: var(--af-azul); color: var(--af-azul-p) !important; transform: translateY(-1px); }

/* Página actual: píldora naranja suave con huellita */
.ct-header .menu > li.current-menu-item > a,
.ct-header .menu > li.current_page_item > a,
.ct-header .menu > li.current-menu-ancestor > a {
	background: rgba(255, 156, 0, .14); color: var(--af-naranja-2) !important;
}
.ct-header .menu > li.current-menu-item > a::before,
.ct-header .menu > li.current_page_item > a::before { content: '🐾'; font-size: .85em; }

/* Submenús */
.ct-header .sub-menu {
	border-radius: 18px !important; padding: 8px !important; background: #fff !important;
	box-shadow: 0 24px 40px -20px rgba(15, 35, 80, .5) !important; border: 1px solid rgba(15, 35, 80, .06);
}
.ct-header .sub-menu a { border-radius: 12px; font-family: var(--af-f-sub); font-weight: 500; color: var(--af-oscuro) !important; }
.ct-header .sub-menu a:hover { background: var(--af-azul); color: var(--af-azul-p) !important; }

/* Carrito: píldora oscura con contador naranja */
.ct-header .af-menu-cart { margin-left: 8px; }
.ct-header .af-menu-cart .af-cart-link {
	display: inline-flex; align-items: center; gap: 8px; padding: 9px 10px 9px 16px !important; border-radius: 999px;
	background: var(--af-oscuro); color: #fff !important; font-family: var(--af-f-sub); font-weight: 600; font-size: .9rem;
	text-decoration: none !important; transition: background .25s, transform .25s; height: auto !important;
}
.ct-header .af-menu-cart .af-cart-link:hover { background: var(--af-azul-p); transform: translateY(-1px); }
.ct-header .af-menu-cart .af-cart-link .af-ico { width: 20px; height: 20px; }
.ct-header .af-menu-cart .af-cart-link b {
	min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center;
	background: var(--af-naranja); color: #fff; font-family: var(--af-f-titulo); font-weight: 400; font-size: .95rem; line-height: 1;
}

/* WhatsApp: botón verde */
.ct-header .af-menu-wa a {
	display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px 10px 14px !important; border-radius: 999px;
	background: var(--af-wa); color: #fff !important; font-family: var(--af-f-sub); font-weight: 600; font-size: .9rem;
	box-shadow: 0 10px 20px -12px rgba(37, 211, 102, .9); text-decoration: none !important; height: auto !important; transition: transform .25s;
}
.ct-header .af-menu-wa a:hover { transform: translateY(-2px); }
.ct-header .af-menu-wa .af-ico { width: 20px; height: 20px; }

/* "Tienda" con el mismo estilo que el resto del menú (commerce.css lo hacía pequeño y en mayúsculas) */
.ct-header .menu > li.af-menu-shop > a {
	font: 600 .93rem var(--af-f-sub) !important; text-transform: none !important; letter-spacing: .01em !important;
	padding: 9px 13px !important; color: var(--af-oscuro) !important;
}
/* Carrito y "Pedir" van en su propio grupo, fuera de la lista del menú (layout.js los saca),
   así Blocksy nunca los manda al submenú "Más" cuando falta espacio */
.ct-header .af-acciones { display: flex; align-items: center; gap: 8px; margin: 0 16px 0 10px; flex: none; }
.ct-header .af-acciones > li { list-style: none; margin: 0; padding: 0; display: flex; }
.ct-header .af-acciones .af-menu-cart { margin-left: 0; }
.ct-header .af-acciones a { white-space: nowrap; }
.ct-header [data-id="search"], .ct-header .ct-header-search { margin-inline-start: 4px; }

/* Menú fijo: más delgado */
.af-header-fijo [data-id="menu"] > ul > li > a,
.af-header-fijo .menu > li > .ct-menu-link { padding: 8px 14px !important; }

/* Botón hamburguesa (móvil) */
.ct-header .ct-header-trigger {
	width: 46px; height: 46px; border-radius: 14px; display: inline-grid; place-items: center;
	background: var(--af-oscuro); color: #fff !important; --theme-icon-color: #fff;
}
.ct-header .ct-header-trigger svg, .ct-header .ct-header-trigger .ct-icon { fill: #fff; color: #fff; }

/* Panel del menú móvil */
#offcanvas .ct-panel-inner,
#offcanvas [class*="ct-panel"] {
	background: var(--af-grano), radial-gradient(70% 50% at 100% 0%, rgba(255, 156, 0, .35), transparent 60%), linear-gradient(170deg, var(--af-oscuro), var(--af-azul-o)) !important;
}
#offcanvas .ct-toggle-close { color: #fff !important; --theme-icon-color: #fff; }
#offcanvas .mobile-menu > ul { display: grid; gap: 6px; }
#offcanvas .mobile-menu > ul > li > a,
#offcanvas .mobile-menu .ct-menu-link {
	font-family: var(--af-f-titulo) !important; font-weight: 400; font-size: 1.55rem !important; color: #fff !important;
	padding: 10px 16px !important; border-radius: 16px; transition: background .25s;
}
#offcanvas .mobile-menu > ul > li > a:hover,
#offcanvas .mobile-menu > ul > li.current-menu-item > a { background: rgba(255, 255, 255, .1); color: var(--af-naranja) !important; }
#offcanvas .mobile-menu > ul > li.current-menu-item > a::before { content: '🐾 '; font-size: .7em; }
#offcanvas .af-menu-cart { margin-top: 12px; }
#offcanvas .af-menu-cart .af-cart-link {
	display: flex !important; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px !important;
	border-radius: 18px; background: #fff; color: var(--af-oscuro) !important; font-family: var(--af-f-sub) !important; font-weight: 600; font-size: 1.05rem !important;
}
#offcanvas .af-menu-cart .af-cart-link .af-ico { width: 22px; height: 22px; color: var(--af-naranja-2); }
#offcanvas .af-menu-cart .af-cart-link span { flex: 1; }
#offcanvas .af-menu-cart .af-cart-link b { min-width: 28px; height: 28px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--af-naranja); color: #fff; }

/* Pantallas medianas: el menú se aprieta para que todo quepa en una línea */
@media (max-width: 1440px) and (min-width: 1000px) {
	.ct-header [data-id="menu"] > ul,
	.ct-header .header-menu-1 > ul { gap: 2px; }
	.ct-header [data-id="menu"] > ul > li > a,
	.ct-header .menu > li > .ct-menu-link,
	.ct-header .menu > li.af-menu-shop > a { padding: 8px 10px !important; font-size: .87rem !important; }
	.ct-header .af-acciones { margin: 0 10px 0 6px; gap: 6px; }
}
@media (max-width: 1280px) and (min-width: 1000px) {
	.ct-header .af-menu-wa span, .ct-header .af-acciones .af-cart-link span { display: none; }
	.ct-header .af-menu-wa a { padding: 10px 12px !important; }
	.ct-header .af-acciones .af-cart-link { padding: 8px 8px 8px 12px !important; }
	.ct-header [data-id="menu"] > ul > li > a,
	.ct-header .menu > li > .ct-menu-link,
	.ct-header .menu > li.af-menu-shop > a { padding: 8px 8px !important; font-size: .84rem !important; }
	.ct-header .menu > li.current-menu-item > a::before { display: none; }
}

/* ================= FOOTER ================= */
body.af-footer-propio #footer,
body.af-footer-propio footer.ct-footer { display: none !important; }

.af-ft { position: relative; margin-top: 90px; color: rgba(255, 255, 255, .82); font-family: var(--af-f-texto); }
.af-ft *, .af-ft *::before, .af-ft *::after { box-sizing: border-box; }
.af-ft .af-wrap { width: min(1600px, 100% - 2 * clamp(16px, 3.2vw, 64px)); margin-inline: auto; position: relative; z-index: 2; }
.af-ft a { color: inherit; text-decoration: none; }

/* Un solo fondo continuo (ola + cuerpo + barra final) recortado con máscara */
.af-ft__fondo {
	--ola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 28C180 54 360 60 540 44S900 4 1080 8s270 28 360 32V60H0z'/%3E%3C/svg%3E");
	position: relative; z-index: 1; padding-top: 60px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23fff' fill-opacity='.035'%3E%3Cpath transform='translate(14 20) rotate(-18 16 16) scale(.5)' d='M32 36c-8 0-15 8-15 15 0 5 4 7 8 6 3-1 5-2 7-2s4 1 7 2c4 1 8-1 8-6 0-7-7-15-15-15zM14 34c3-1 4-5 3-9s-5-7-8-6-4 5-3 9 5 7 8 6zm36 0c3 1 7-2 8-6s0-8-3-9-7 2-8 6 0 8 3 9zM24 24c4 0 6-4 6-9s-3-9-6-9-6 4-6 9 2 9 6 9zm16 0c4 0 6-4 6-9s-2-9-6-9-6 4-6 9 2 9 6 9z'/%3E%3Cpath transform='translate(84 86) rotate(22 16 16) scale(.4)' d='M32 36c-8 0-15 8-15 15 0 5 4 7 8 6 3-1 5-2 7-2s4 1 7 2c4 1 8-1 8-6 0-7-7-15-15-15zM14 34c3-1 4-5 3-9s-5-7-8-6-4 5-3 9 5 7 8 6zm36 0c3 1 7-2 8-6s0-8-3-9-7 2-8 6 0 8 3 9zM24 24c4 0 6-4 6-9s-3-9-6-9-6 4-6 9 2 9 6 9zm16 0c4 0 6-4 6-9s-2-9-6-9-6 4-6 9 2 9 6 9z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 140px 140px,
		radial-gradient(50% 50% at 100% 10%, rgba(255, 156, 0, .2), transparent 60%),
		radial-gradient(45% 55% at 0% 90%, rgba(56, 182, 255, .18), transparent 60%),
		linear-gradient(180deg, #13306b 0%, var(--af-oscuro) 45%, #0a1a3d 100%);
	-webkit-mask: var(--ola) top / 100% 60px no-repeat, linear-gradient(#000 0 0) 0 59px / 100% calc(100% - 59px) no-repeat;
	        mask: var(--ola) top / 100% 60px no-repeat, linear-gradient(#000 0 0) 0 59px / 100% calc(100% - 59px) no-repeat;
}

.af-ft__mascotas { position: absolute; top: -30px; left: 0; right: 0; z-index: 0; height: 90px; pointer-events: none; }
.af-ft__mascotas span { position: absolute; bottom: 20px; font-size: clamp(3rem, 4.6vw, 4.2rem); line-height: 1; animation: af-asoma 4s ease-in-out infinite; }
.af-ft__mascotas span:first-child { left: 12%; }
.af-ft__mascotas span:last-child { right: 14%; bottom: 44px; animation-delay: -2s; }
@keyframes af-asoma { 0%, 100% { transform: translateY(26px); } 40%, 60% { transform: translateY(0) rotate(-6deg); } }

.af-ft__cuerpo { position: relative; padding: 18px 0 clamp(30px, 5vh, 50px); }

/* Franja de confianza */
.af-ft__conf { list-style: none; margin: 0 0 clamp(30px, 4.5vh, 46px); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.af-ft__conf li { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 14px 16px; font-size: .85rem; line-height: 1.3; backdrop-filter: blur(4px); }
.af-ft__conf li > span { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: rgba(255, 156, 0, .16); }
.af-ft__conf strong { display: block; font-family: var(--af-f-sub); font-size: .95rem; color: #fff; }

/* Columnas */
.af-ft__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(24px, 4vw, 70px); }
.af-ft__logo { display: inline-flex; margin-bottom: 14px; }
.af-ft__logo-marca { display: block; width: 240px; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); transition: transform .3s; }
.af-ft__logo:hover .af-ft__logo-marca { transform: rotate(-2deg) scale(1.03); }
.af-ft__logo-img { display: inline-grid; place-items: center; background: #fff; border-radius: 22px; padding: 10px 16px; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6); }
.af-ft__logo-img img { max-height: 64px; width: auto; display: block; }
.af-ft__logo-txt { display: inline-flex; align-items: center; gap: 10px; font-family: var(--af-f-titulo); font-size: 2rem; color: #fff; }
.af-ft__logo-txt .af-ico { width: 34px; height: 34px; color: var(--af-naranja); }
.af-ft__marca p { margin: 0 0 18px; max-width: 380px; line-height: 1.6; font-size: .95rem; }
.af-ft__redes { display: flex; gap: 10px; }
.af-ft__red { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff !important; transition: transform .25s, background .25s; }
.af-ft__red .af-ico { width: 22px; height: 22px; }
.af-ft__red:hover { transform: translateY(-3px); }
.af-ft__red--wa:hover { background: var(--af-wa); }
.af-ft__red--facebook:hover { background: #1877f2; }
.af-ft__red--instagram:hover { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); }

.af-ft__col h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.35rem; color: #fff; margin: 4px 0 14px; display: flex; align-items: center; gap: 8px; }
.af-ft__col h3::before { content: ''; width: 18px; height: 4px; border-radius: 9px; background: var(--af-naranja); }
.af-ft__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.af-ft__col li a { display: inline-flex; align-items: center; gap: 6px; font-size: .94rem; transition: color .2s, transform .2s; }
.af-ft__col li a:hover { color: var(--af-naranja); transform: translateX(4px); }
.af-ft__contacto li { display: flex; align-items: center; gap: 10px; font-size: .94rem; }
.af-ft__contacto li > .af-ico { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: var(--af-naranja); }
.af-ft__contacto .af-btn { margin-top: 18px; padding: 12px 22px; font-size: .92rem; }

/* Barra inferior: misma textura, solo una línea divisoria */
.af-ft__base { position: relative; border-top: 1px solid rgba(255, 255, 255, .1); padding: 16px 0; font-size: .82rem; color: rgba(255, 255, 255, .6); }
.af-ft__base .af-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.af-ft__legal { display: flex; gap: 18px; }
.af-ft__legal a:hover { color: var(--af-naranja); }

@media (max-width: 1100px) {
	.af-ft__grid { grid-template-columns: 1fr 1fr; }
	.af-ft__conf { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.af-ft { margin-top: 70px; }
	.af-ft__fondo { padding-top: 40px; -webkit-mask-size: 100% 40px, 100% calc(100% - 39px); mask-size: 100% 40px, 100% calc(100% - 39px); -webkit-mask-position: top, 0 39px; mask-position: top, 0 39px; }
	.af-ft__mascotas span { font-size: 2.8rem; bottom: 34px; }
	.af-ft__mascotas span:last-child { bottom: 44px; }
	.af-ft__conf { gap: 8px; margin-bottom: 26px; }
	.af-ft__conf li { flex-direction: column; text-align: center; padding: 10px 8px; gap: 6px; font-size: .74rem; }
	.af-ft__conf li > span { width: 36px; height: 36px; font-size: 1.15rem; }
	.af-ft__conf strong { font-size: .82rem; }
	.af-ft__grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
	.af-ft__marca, .af-ft__contacto { grid-column: 1 / -1; }
	.af-ft__marca { text-align: center; }
	.af-ft__logo-marca { width: 200px; margin: 0 auto; }
	.af-ft__marca p { margin-inline: auto; font-size: .9rem; }
	.af-ft__redes { justify-content: center; }
	.af-ft__col h3 { font-size: 1.15rem; margin-bottom: 10px; }
	.af-ft__col li a, .af-ft__contacto li { font-size: .86rem; }
	.af-ft__contacto .af-btn { width: 100%; }
	.af-ft__base { padding-bottom: 84px; } /* espacio para el botón flotante de WhatsApp */
	.af-ft__base .af-wrap { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.af-ft__mascotas span { animation: none; transform: none; }
}

/* =========================================================
   FONDOS DEL SITIO: solo blancos o azules
   ========================================================= */
:root {
	--af-fondo-azul: 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%);
}
/* Crema, degradado cálido, puntos naranjas y azul pálido pasan a blanco */
.af-sec--crema, .af-sec--mesh, .af-sec--puntos, .af-sec--azul,
.af-sec:where(:not([class*="af-sec--"]):not(.af-envios):not(.af-rs)) { background: #fff; animation: none; }
/* Manchas de luz que se mueven detrás de las secciones (animación original), más suaves
   para que el fondo siga viéndose blanco o azul */
.af-sec:not(.af-sec--azulf):not(.af-envios)::before,
.af-sec:not(.af-sec--azulf):not(.af-envios)::after { opacity: .22; }
.af-sec.af-rd--azul::before, .af-sec.af-rd--azul::after,
.af-sec.af-relige::before, .af-sec.af-qs-azul::before, .af-sec.af-qs-azul::after { opacity: .35; }
/* Encabezados de páginas internas: azul (ya no naranja) */
.af-phero--naranja { background: var(--af-grano), radial-gradient(50% 60% at 90% 100%, rgba(255, 156, 0, .4), transparent 70%), radial-gradient(120% 140% at 10% 0%, #38b6ff 0%, var(--af-azul-p) 45%, var(--af-azul-o) 100%); }
/* Tienda */
.af-commerce #main { background: #fff !important; }
.af-store-help { background: var(--af-fondo-azul) !important; color: #fff; box-shadow: 0 30px 50px -30px rgba(12, 60, 140, .8); }
.af-store-help h2 { color: #fff !important; }
.af-store-help p { color: rgba(255, 255, 255, .88); }
.af-store-help .af-kicker { color: #fff; background: rgba(255, 255, 255, .16); }
.af-store-help .af-btn--oscuro { background: #fff; color: var(--af-oscuro) !important; }

/* Emojis que pasan por detrás en los fondos blancos (los inserta layout.js) */
.af-flotan { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.af-flotan span { position: absolute; bottom: -70px; font-size: 2rem; opacity: .22; filter: saturate(.9); animation: af-sube 22s linear infinite; }
.af-flotan span:nth-child(1) { left: 4%; animation-delay: 0s; }
.af-flotan span:nth-child(2) { left: 18%; animation-delay: -6s; font-size: 1.5rem; }
.af-flotan span:nth-child(3) { left: 33%; animation-delay: -12s; font-size: 1.8rem; }
.af-flotan span:nth-child(4) { left: 49%; animation-delay: -3s; font-size: 1.4rem; }
.af-flotan span:nth-child(5) { left: 63%; animation-delay: -15s; }
.af-flotan span:nth-child(6) { left: 77%; animation-delay: -9s; font-size: 1.6rem; }
.af-flotan span:nth-child(7) { left: 90%; animation-delay: -18s; font-size: 1.9rem; }
.af-flotan span:nth-child(8) { left: 97%; animation-delay: -5s; font-size: 1.3rem; }
.af-con-flotan { position: relative; isolation: isolate; }
.af-flotan--azul span { opacity: .3; }
.af-store-catalog.af-con-flotan > :not(.af-flotan) { position: relative; z-index: 1; }
@media (max-width: 640px) {
	.af-flotan span { font-size: 1.4rem; opacity: .16; }
	.af-flotan span:nth-child(n+6) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .af-flotan { display: none; } }

/* ===== Secciones azules reutilizables (Tips, Beneficios) ===== */
.af-sec.af-azul, .af-page-beneficios .af-sec#visceras { background: var(--af-fondo-azul); color: #fff; }
.af-azul .af-h2, .af-page-beneficios #visceras .af-h2 { color: #fff; }
.af-azul .af-lead, .af-page-beneficios #visceras .af-lead { color: rgba(255, 255, 255, .88); }
.af-azul .af-kicker, .af-page-beneficios #visceras .af-kicker { color: #fff; background: rgba(255, 255, 255, .16); }
.af-azul .af-grad, .af-page-beneficios #visceras .af-head .af-grad { background: linear-gradient(90deg, #ffd27a, #ff9c00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.af-sec.af-azul::before, .af-sec.af-azul::after,
.af-page-beneficios #visceras::before, .af-page-beneficios #visceras::after { opacity: .35; }

/* ===== Guía de porciones: un solo selector de peso y cabe en una pantalla ===== */
/* "Todas las porciones" repetía los mismos kilos que los botones del paso 1 → se oculta
   (se queda en el código porque el script la usa) y su nota pasa al resultado (layout.js). */
.af-guia[data-guia] .af-guia__todos { display: none !important; }
.af-guia__nota { margin: 8px 0 0; font-size: .82rem; line-height: 1.4; opacity: .8; }
.af-guia { padding: clamp(14px, 2vw, 26px) !important; }
.af-guia[data-guia] .af-guia__especie { margin-bottom: clamp(10px, 1.6vh, 16px) !important; }
.af-guia[data-guia] .af-guia__grid { align-items: center; gap: clamp(12px, 2vw, 28px); }
.af-guia[data-guia] .af-guia__escena { max-width: min(100%, 32vh, 340px) !important; margin-inline: auto; }
.af-guia[data-guia] .af-guia__paso { margin-bottom: 8px; }
.af-guia[data-guia] .af-guia__actividad { margin-top: 12px; }
.af-guia[data-guia] .af-guia__gramos { line-height: 1; }
#porciones .af-head { margin-bottom: clamp(12px, 2vh, 22px); }
#porciones .af-head .af-lead { margin-top: 6px; }
#porciones .af-pp__acc, #porciones .af-btns { margin-top: clamp(12px, 2vh, 20px); }
#porciones.af-sec { padding-block: clamp(28px, 4.5vh, 56px); }
#porciones .af-head .af-h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); margin-bottom: 6px; }
#porciones .af-head .af-kicker { margin-bottom: 8px; }
#porciones .af-head .af-lead { font-size: clamp(.92rem, 1.1vw, 1.02rem); line-height: 1.5; margin-bottom: 0; }
/* Peso: los 4 botones en una sola fila */
.af-guia[data-guia] .af-guia__chips { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.af-guia[data-guia] .af-guia__chip { padding: 10px 4px; border-radius: 16px; }
.af-guia[data-guia] .af-guia__chip-em { font-size: calc(1.5rem * var(--s, 1)); }
.af-guia[data-guia] .af-guia__esp { padding: 8px 10px; font-size: 1.3rem; }
/* Resultado más compacto */
.af-guia[data-guia] .af-guia__sub { margin: 4px 0 8px; }
.af-guia[data-guia] .af-guia__reco { margin-bottom: 8px; padding: 6px 14px; }
.af-guia[data-guia] .af-guia__kcal { padding: 8px 10px; }
.af-guia[data-guia] .af-guia__barra { margin: 10px 0 6px; height: 10px; }
@media (max-width: 1024px) {
	.af-guia[data-guia] .af-guia__grid { grid-template-columns: 1fr 1fr; }
	.af-guia[data-guia] .af-guia__pesos { grid-column: 1 / -1; }
	.af-guia[data-guia] .af-guia__escena { grid-column: auto; order: 0; max-width: 260px !important; }
}
@media (max-width: 640px) {
	/* En celular: peso arriba y debajo el plato junto al resultado, para verlo todo de un vistazo */
	.af-guia[data-guia] .af-guia__grid { grid-template-columns: .9fr 1.1fr; gap: 10px; }
	.af-guia[data-guia] .af-guia__escena { max-width: 100% !important; }
	.af-guia[data-guia] .af-guia__orbita span { width: 30px; height: 30px; margin: -15px; font-size: 1rem; }
	.af-guia[data-guia] .af-guia__comida span { font-size: 1.1rem; }
	.af-guia[data-guia] .af-guia__vapor { display: none; }
	.af-guia[data-guia] .af-guia__chip { padding: 8px 2px; }
	.af-guia[data-guia] .af-guia__chip strong { font-size: .85rem; }
	.af-guia[data-guia] .af-guia__paso { font-size: .88rem; margin-bottom: 6px; }
	.af-guia[data-guia] .af-guia__paso b { width: 24px; height: 24px; font-size: .85rem; }
	.af-guia[data-guia] .af-guia__gramos { font-size: 2rem !important; }
	.af-guia[data-guia] .af-guia__sub, .af-guia[data-guia] .af-guia__tip, .af-guia__nota { font-size: .76rem; }
	.af-guia[data-guia] .af-guia__reco { font-size: .78rem; padding: 5px 10px; }
	.af-guia[data-guia] .af-guia__kcal { font-size: .78rem; gap: 6px; padding: 6px; border-radius: 12px; }
	.af-guia[data-guia] .af-guia__kcal strong { font-size: .9rem; }
	.af-guia[data-guia] .af-guia__kcal-ico { font-size: 1.1rem; }
	.af-guia[data-guia] .af-guia__toggle button { padding: 8px 4px; font-size: .82rem; }
	#porciones .af-btns .af-btn { flex: 1 1 0; padding: 12px 10px; font-size: .85rem; }
}

/* ===== Guía de porciones: los gatos también eligen qué tan activos son ===== */
.af-guia[data-sel="gato"] .af-guia__actividad { opacity: 1 !important; max-height: 200px !important; margin-top: 12px !important; }
.af-guia[data-sel="gato"] .af-guia__reco { display: inline-block !important; }

/* ===== Botón flotante de WhatsApp: círculo perfecto (al pasar el mouse se abre con el texto) ===== */
.af-wa-float {
	width: 60px; height: 60px; padding: 0 !important; gap: 0 !important; justify-content: center; border-radius: 50% !important;
	transition: width .35s cubic-bezier(.3, 1.3, .5, 1), border-radius .35s, padding .35s;
}
.af-wa-float .af-ico { width: 32px !important; height: 32px !important; flex: none; }
.af-wa-float .af-wa-float__txt { max-width: 0; margin: 0; }
@media (hover: hover) {
	.af-wa-float:hover { width: auto; padding: 0 22px 0 14px !important; gap: 10px !important; border-radius: 999px !important; }
	.af-wa-float:hover .af-wa-float__txt { max-width: 200px; }
}
@media (max-width: 600px) {
	.af-wa-float { width: 56px; height: 56px; right: 14px; bottom: 14px; }
	.af-wa-float .af-ico { width: 30px !important; height: 30px !important; }
}

/* ===== Modo "Solo WhatsApp" y productos bajo pedido (v1.27) ===== */
.af-solo-wa .af-menu-cart, .af-solo-wa .af-cart-movil, .af-solo-wa #offcanvas .af-menu-cart,
.af-solo-wa .af-compra-pasos, .af-solo-wa .added_to_cart { display: none !important; }
.af-solo-wa.single-product .summary > .af-btn--wa,
.af-prod-pedido.single-product .summary > .af-btn--wa { display: none !important; }
.single-product .summary .price .af-pedido { font-size: 1.4rem; color: #0c3c8c; }
.af-fwa { margin: 18px 0 8px; padding: 18px; border-radius: 22px; background: #eef6ff; border: 2px dashed #b9d6ff; --c: #1769e0; }
.af-fwa__t { margin: 0 0 12px; font-size: .98rem; line-height: 1.5; color: #24324f; }
.af-fwa__una { margin: 0 0 12px; font-size: .9rem; }
.af-fwa .af-pres { margin: 0 0 14px; max-width: 320px; }
.af-fwa .af-pres__op { font-size: .95rem; padding: 11px 14px; }
.af-rd__precio--pedido { font-size: 1.05rem !important; }
.af-rsl__precio small { font-size: .75em; opacity: .8; }

/* ===== Blog: preguntas frecuentes (bloque Detalles) (v1.28) ===== */
.single-post .wp-block-details { background: #fff; border: 2px solid #e3eefc; border-radius: 18px; padding: 0; margin: 0 0 12px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.single-post .wp-block-details[open] { border-color: #ffb45c; box-shadow: 0 14px 28px -18px rgba(255, 122, 0, .55); }
.single-post .wp-block-details summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; font-family: var(--af-f-sub, inherit); font-weight: 700; color: var(--af-oscuro, #0f2350); }
.single-post .wp-block-details summary::-webkit-details-marker { display: none; }
.single-post .wp-block-details summary::after { content: '+'; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff1e0; color: #ff7a00; font-size: 1.3rem; line-height: 1; transition: transform .3s, background .3s, color .3s; }
.single-post .wp-block-details[open] summary::after { transform: rotate(45deg); background: #ff7a00; color: #fff; }
.single-post .wp-block-details > :not(summary) { padding: 0 20px 18px; margin: 0; color: #4b5a73; }

/* Palabra animada dentro de un título: que no se pegue a las palabras vecinas */
.af-hero__t [data-wiggle], h1 [data-wiggle], h2 [data-wiggle] { margin-inline: .14em; }