/* ========================================================= ANIMAL FOOD · Estilos principales ========================================================= */ :root { --af-naranja: #ff9c00; --af-naranja-2: #ff7a00; --af-azul-p: #1769e0; --af-cielo: #38b6ff; --af-azul-o: #0c3c8c; --af-oscuro: #0f2350; --af-texto: #2b3445; --af-gris: #5b6781; --af-crema: #fff3e2; --af-azul: #e8f3ff; --af-azul-2: #b9dcff; --af-navy: #0c3c8c; --af-blanco: #ffffff; --af-wa: #25d366; --af-f-titulo: 'Changa One', 'Poppins', system-ui, sans-serif; --af-f-sub: 'Poppins', system-ui, sans-serif; --af-f-texto: 'Work Sans', system-ui, sans-serif; --af-r: 22px; --af-r-lg: 36px; --af-sombra: 0 18px 40px -18px rgba(15, 35, 80, .35); --af-sombra-n: 0 16px 36px -14px rgba(255, 122, 0, .55); --af-ancho: 1200px; } /* Base */ body { font-family: var(--af-f-texto); color: var(--af-texto); -webkit-font-smoothing: antialiased; } body.af-landing .site-main, body.af-landing #main { padding: 0 !important; } .af-wrap { width: min(var(--af-ancho), 100% - 40px); margin-inline: auto; position: relative; z-index: 2; } .af-wrap--angosto { width: min(820px, 100% - 40px); } .af-sec { padding: clamp(64px, 9vw, 120px) 0; position: relative; overflow: hidden; } .af-sec--crema { background: var(--af-crema); } .af-sec--azul { background: var(--af-azul); } .af-sec--azulf { background: radial-gradient(120% 120% at 0% 0%, #3bb4ff 0%, var(--af-azul-p) 40%, var(--af-azul-o) 100%); color: #fff; } /* Tipografía */ .af-h2 { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.08; color: var(--af-oscuro); margin: 0 0 18px; letter-spacing: -.01em; } .af-h2--blanco { color: #fff; } .af-lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.7; color: var(--af-gris); margin: 0 0 26px; } .af-lead--blanco { color: rgba(255, 255, 255, .88); } .af-kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--af-f-sub); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--af-naranja-2); background: rgba(255, 156, 0, .12); padding: 7px 14px; border-radius: 999px; margin-bottom: 16px; } .af-kicker::before { content: '🐾'; font-size: .9em; } .af-kicker--blanco { color: #fff; background: rgba(255, 255, 255, .16); } .af-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); } .af-subraya { position: relative; white-space: nowrap; color: var(--af-azul-p); } .af-subraya::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: -6px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c20-8 30 6 50-2s30 6 50-2 30 6 50-2 30 6 46-1' fill='none' stroke='%23ff9c00' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; transform-origin: left; animation: af-trazo 1.2s .4s both ease-out; } @keyframes af-trazo { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Iconos */ .af-ico { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; } .af-ico svg { width: 100%; height: 100%; } /* Botones */ .af-btns { display: flex; flex-wrap: wrap; gap: 14px; } .af-btns--c { justify-content: center; } .af-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--af-f-sub); font-weight: 600; font-size: 1rem; padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none !important; line-height: 1; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), translate .2s ease-out, box-shadow .25s, background .25s, color .25s; position: relative; overflow: hidden; isolation: isolate; translate: var(--tx, 0px) var(--ty, 0px); } .af-btn::after { /* destello que recorre el botón */ content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: af-brillo 3.2s ease-in-out infinite; } @keyframes af-brillo { 0%, 60% { left: -60%; } 100% { left: 130%; } } .af-btn--primario { animation: af-late 2.6s ease-in-out infinite; } @keyframes af-late { 0%, 100% { box-shadow: var(--af-sombra-n); } 50% { box-shadow: 0 16px 36px -10px rgba(255, 122, 0, .85), 0 0 0 6px rgba(255, 156, 0, .15); } } .af-btn:hover { transform: translateY(-3px) scale(1.02); } .af-btn .af-ico { transition: transform .25s; } .af-btn:hover .af-ico--flecha { transform: translateX(4px); } .af-btn--primario { background: linear-gradient(135deg, var(--af-naranja), var(--af-naranja-2)); color: #fff !important; box-shadow: var(--af-sombra-n); } .af-btn--oscuro { background: var(--af-oscuro); color: #fff !important; } .af-btn--oscuro:hover { background: var(--af-azul-p); } .af-btn--blanco { background: #fff; color: var(--af-oscuro) !important; } .af-btn--blanco .af-ico--whatsapp { color: var(--af-wa); } .af-btn--wa { background: var(--af-wa); color: #fff !important; box-shadow: 0 14px 30px -14px rgba(37, 211, 102, .8); } .af-btn--full { width: 100%; margin-top: 12px; } .af-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--af-f-sub); font-weight: 600; color: var(--c, var(--af-naranja-2)) !important; text-decoration: none !important; } .af-link:hover .af-ico { transform: translateX(4px); } .af-link .af-ico { transition: transform .2s; } /* Decoración huellas */ .af-deco { position: absolute; color: currentColor; opacity: .09; pointer-events: none; z-index: 1; } .af-deco .af-ico { width: 100%; height: 100%; } .af-deco--1 { width: 160px; height: 160px; top: 12%; left: -40px; transform: rotate(-22deg); } .af-deco--2 { width: 110px; height: 110px; bottom: 18%; right: 4%; transform: rotate(18deg); } .af-deco--3 { width: 220px; height: 220px; right: -50px; top: -40px; transform: rotate(25deg); color: #fff; opacity: .12; } /* Ondas */ .af-onda { position: absolute; left: 0; bottom: -1px; width: 100%; height: 60px; z-index: 3; fill: #fff; } /* Barra promo */ .af-promo { background: var(--af-oscuro); color: #fff; text-align: center; font-family: var(--af-f-sub); font-size: .9rem; padding: 10px 16px; position: relative; z-index: 60; } .af-promo a { color: var(--af-naranja); font-weight: 600; margin-left: 8px; text-decoration: none; } .af-promo a:hover { text-decoration: underline; } /* ================= HERO INICIO ================= */ .af-hero { position: relative; overflow: hidden; color: #fff; min-height: min(92vh, 860px); display: flex; align-items: center; padding: clamp(60px, 8vw, 110px) 0 clamp(100px, 10vw, 140px); background: radial-gradient(120% 120% at 80% 20%, #38b6ff 0%, #1769e0 45%, #0c3c8c 100%); } .af-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .af-hero__velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(12, 60, 140, .9) 0%, rgba(23, 105, 224, .75) 50%, rgba(56, 182, 255, .45) 100%); } .af-hero .af-deco { color: #fff; } .af-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center; } .af-hero__t { font-family: var(--af-f-titulo); font-weight: 400; color: #fff; font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: 1; margin: 0 0 22px; letter-spacing: -.015em; } .af-hero__t em { font-style: normal; color: var(--af-naranja); position: relative; } .af-hero__sellos { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--af-f-sub); font-weight: 500; font-size: .95rem; } .af-hero__sellos li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .9); } .af-hero__sellos .af-ico { color: var(--af-naranja); } .af-hero__media { position: relative; aspect-ratio: 1; } .af-hero__blob { position: absolute; inset: 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; box-shadow: 0 30px 80px -20px rgba(255, 156, 0, .6); } @keyframes af-blob { 0%, 100% { border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; transform: rotate(0); } 50% { border-radius: 42% 58% 44% 56% / 58% 42% 58% 42%; transform: rotate(8deg); } } .af-slides { position: absolute; inset: 0; } .af-slides > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.94); transition: opacity 1s, transform 1.2s; } .af-slides > .is-on { opacity: 1; transform: scale(1); animation: af-flota2 6s ease-in-out infinite; } .af-slides .af-ph { background: none; } .af-slides .af-ph span { font-size: clamp(9rem, 22vw, 15rem); } .af-sticker { position: absolute; right: 2%; top: 6%; z-index: 3; width: 108px; height: 108px; border-radius: 50%; background: var(--af-azul-p); color: #fff; display: grid; place-content: center; text-align: center; font-family: var(--af-f-titulo); font-size: 2rem; line-height: 1; transform: rotate(12deg); box-shadow: 0 14px 30px -10px rgba(15, 35, 80, .6); border: 4px solid #fff; animation: af-flota 4s ease-in-out infinite; } .af-sticker small { font-family: var(--af-f-sub); font-size: .72rem; font-weight: 600; margin-top: 4px; } @keyframes af-flota { 0%, 100% { transform: rotate(12deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-10px); } } /* Cinta */ .af-cinta { background: var(--af-naranja); color: var(--af-oscuro); overflow: hidden; padding: 16px 0; transform: rotate(-1.2deg); margin: -10px -10px 0; position: relative; z-index: 4; } .af-cinta__track { display: flex; gap: 28px; width: max-content; animation: af-marquee 30s linear infinite; font-family: var(--af-f-titulo); font-size: clamp(1.1rem, 2vw, 1.5rem); white-space: nowrap; align-items: center; } .af-cinta__track i { font-style: normal; } @keyframes af-marquee { to { transform: translateX(-50%); } } /* Split */ .af-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; } .af-split--top { align-items: end; margin-bottom: 50px; } .af-circulo { aspect-ratio: 1; max-width: 460px; margin: auto; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0, var(--af-crema) 55%, #ffe1b3 100%); display: grid; place-items: center; position: relative; box-shadow: var(--af-sombra); } .af-circulo::before { content: ''; position: absolute; inset: -18px; border: 3px dashed var(--af-naranja); border-radius: 50%; animation: af-giro 40s linear infinite; } @keyframes af-giro { to { transform: rotate(360deg); } } .af-circulo img { width: 78%; height: auto; } .af-circulo .af-ph { width: 78%; height: 78%; background: none; } .af-foto-redonda { border-radius: var(--af-r-lg); overflow: hidden; box-shadow: var(--af-sombra); transform: rotate(2deg); border: 8px solid #fff; } .af-foto-redonda img, .af-foto-redonda .af-ph { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; } /* Stats */ .af-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 30px; } .af-stats div { background: var(--af-crema); border-radius: var(--af-r); padding: 18px 12px; text-align: center; } .af-stats strong { display: block; font-family: var(--af-f-titulo); font-weight: 400; font-size: 2rem; color: var(--af-azul-p); line-height: 1; } .af-stats span { font-size: .85rem; color: var(--af-gris); } /* Ingredientes (tabs) */ .af-ing { background: #fff; border-radius: var(--af-r-lg); box-shadow: var(--af-sombra); padding: clamp(18px, 3vw, 34px); } .af-ing__nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; } .af-ing__tab { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--af-f-sub); font-weight: 600; font-size: .95rem; background: var(--af-azul); color: var(--af-oscuro); border: 2px solid transparent; padding: 10px 18px; border-radius: 999px; transition: all .25s; } .af-ing__tab:hover { border-color: var(--af-naranja); } .af-ing__tab.is-on { background: var(--af-oscuro); color: #fff; } .af-ing__em { font-size: 1.25rem; } .af-ing__panel { display: none; grid-template-columns: .8fr 1.2fr; gap: clamp(20px, 4vw, 60px); align-items: center; } .af-ing__panel.is-on { display: grid; animation: af-entra .5s ease both; } @keyframes af-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .af-ing__bubble { aspect-ratio: 1; max-width: 320px; width: 100%; margin: auto; border-radius: 50%; background: var(--bg); display: grid; place-items: center; position: relative; } .af-ing__bubble span { font-size: clamp(6rem, 14vw, 9rem); animation: af-bota 3s ease-in-out infinite; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .15)); } @keyframes af-bota { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } } .af-ing__info h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--af-naranja-2); margin: 0 0 16px; } .af-checks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; } .af-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.05rem; line-height: 1.5; } .af-checks .af-ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(23, 105, 224, .1); color: var(--af-azul-p); margin-top: 1px; } /* Recetas */ .af-recetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; } .af-receta { background: #fff; border-radius: var(--af-r-lg); overflow: hidden; box-shadow: var(--af-sombra); display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .35s; border-top: 6px solid var(--c); } .af-receta:hover { transform: translateY(-10px) rotate(-.6deg); box-shadow: 0 30px 50px -20px rgba(15, 35, 80, .45); } .af-receta__img { position: relative; aspect-ratio: 867/1024; overflow: hidden; background: var(--af-crema); } .af-receta__img img, .af-receta__img .af-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .af-receta__img .af-ph { background: radial-gradient(circle at 50% 45%, #fff 0 28%, color-mix(in srgb, var(--c) 22%, #fff) 29% 100%); } .af-receta__img .af-ph span { font-size: 5.5rem; animation: af-bota 3s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .3s); } .af-receta:hover .af-receta__img img, .af-receta:hover .af-receta__img .af-ph { transform: scale(1.07); } .af-receta__tags { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; } .af-receta__tags span { background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); font-family: var(--af-f-sub); font-size: .75rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; color: var(--af-oscuro); } .af-receta__body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .af-receta__body h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.45rem; color: var(--af-oscuro); margin: 0; } .af-receta__body p { margin: 0 0 6px; color: var(--af-gris); font-size: .95rem; line-height: 1.55; flex: 1; } /* Tarjetas */ .af-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .af-card { background: #fff; border-radius: var(--af-r-lg); padding: 34px 30px; box-shadow: var(--af-sombra); transition: transform .3s; } .af-card:hover { transform: translateY(-6px); } .af-card h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.55rem; color: var(--af-oscuro); margin: 14px 0 12px; } .af-card p { margin: 0 0 8px; line-height: 1.55; } .af-card__em { font-size: 2.6rem; display: inline-block; } .af-card__ico { display: inline-flex; width: 58px; height: 58px; border-radius: 18px; background: rgba(255, 156, 0, .14); color: var(--af-naranja-2); align-items: center; justify-content: center; } .af-card__ico .af-ico { width: 28px; height: 28px; } .af-card--naranja { background: linear-gradient(150deg, var(--af-naranja), var(--af-naranja-2)); color: #fff; transform: translateY(-14px); } .af-card--naranja:hover { transform: translateY(-20px); } .af-card--naranja h3 { color: #fff; } .af-card--naranja .af-card__ico { background: rgba(255, 255, 255, .2); color: #fff; } /* Envíos */ .af-envios { color: #fff; background: var(--af-navy); } .af-envios__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .af-envios__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 60, 140, .95), rgba(23, 105, 224, .75)); z-index: 1; } .af-envios__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center; } .af-envios__img img, .af-envios__img .af-ph { width: 100%; max-width: 380px; height: auto; margin: auto; display: block; animation: af-flota2 5s ease-in-out infinite; } .af-envios__img .af-ph { aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 156, 0, .35), transparent 65%); } .af-envios__img .af-ph span { font-size: 10rem; animation: af-moto 2.4s ease-in-out infinite; } @keyframes af-moto { 0%, 100% { transform: translateX(-10px) rotate(-3deg); } 50% { transform: translateX(10px) rotate(3deg); } } @keyframes af-flota2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } .af-pin { display: inline-flex; width: 66px; height: 66px; border-radius: 50%; background: var(--af-naranja); align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 0 0 10px rgba(255, 156, 0, .25); animation: af-pulso 2s infinite; } .af-pin .af-ico { width: 30px; height: 30px; color: #fff; } @keyframes af-pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 156, 0, .5); } 100% { box-shadow: 0 0 0 22px rgba(255, 156, 0, 0); } } /* Pasos */ .af-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: paso; } .af-paso { background: #fff; border: 2px solid var(--af-azul); border-radius: var(--af-r-lg); padding: 26px 22px; text-align: center; position: relative; transition: border-color .3s, transform .3s; } .af-paso:hover { border-color: var(--af-naranja); transform: translateY(-6px); } .af-paso__n { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--af-azul-p); color: #fff; font-family: var(--af-f-titulo); font-size: 1.2rem; display: grid; place-items: center; } .af-paso__img { width: 130px; height: 130px; margin: 6px auto 10px; } .af-paso__img img { width: 100%; height: 100%; object-fit: contain; display: block; } .af-paso__img .af-ph { width: 100%; height: 100%; border-radius: 50%; background: var(--af-azul); } .af-paso__img .af-ph span { font-size: 3.6rem; animation: af-bota 3s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .4s); } .af-paso h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.35rem; color: var(--af-oscuro); margin: 0 0 8px; } .af-paso p { margin: 0; color: var(--af-gris); font-size: .95rem; } /* Tablas */ .af-tablas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .af-tabla { margin: 0; background: #fff; border-radius: var(--af-r-lg); padding: 22px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); } .af-tabla figcaption { font-family: var(--af-f-titulo); font-size: 1.4rem; color: var(--af-oscuro); margin-bottom: 14px; } .af-tabla figcaption small { font-family: var(--af-f-texto); font-size: .85rem; color: var(--af-gris); } .af-tabla img { width: 100%; height: auto; border-radius: 14px; display: block; transition: transform .4s; } .af-tabla a:hover img { transform: scale(1.02); } /* CTA final */ .af-cta { padding-top: 40px; } .af-cta__box { position: relative; overflow: hidden; text-align: center; background: linear-gradient(135deg, var(--af-oscuro) 0%, #0c3c8c 60%, var(--af-azul-p) 100%); border-radius: var(--af-r-lg); padding: clamp(50px, 7vw, 90px) clamp(24px, 6vw, 90px); box-shadow: 0 40px 80px -40px rgba(23, 105, 224, .7); } .af-cta__box .af-lead { max-width: 560px; margin-inline: auto; } /* Hero páginas internas */ .af-phero { position: relative; overflow: hidden; color: #fff; padding: clamp(70px, 10vw, 130px) 0 clamp(90px, 11vw, 150px); text-align: center; } .af-phero--naranja { background: radial-gradient(120% 140% at 10% 0%, #ffc15a 0%, var(--af-naranja) 40%, var(--af-naranja-2) 100%); } .af-phero--azul { background: radial-gradient(120% 140% at 10% 0%, #3bb4ff 0%, var(--af-azul-p) 45%, var(--af-azul-o) 100%); } .af-phero .af-deco { color: #fff; opacity: .16; } .af-phero__in { max-width: 820px; } .af-phero .af-kicker { color: #fff; background: rgba(255, 255, 255, .2); } .af-phero__t { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.02; color: #fff; margin: 0 0 18px; } .af-phero__p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, .92); margin: 0; } /* Timeline */ .af-timeline { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: t; } .af-timeline li { counter-increment: t; position: relative; padding: 0 0 26px 64px; } .af-timeline li::before { content: counter(t); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 14px; background: var(--af-naranja); color: #fff; font-family: var(--af-f-titulo); font-size: 1.3rem; display: grid; place-items: center; } .af-timeline li::after { content: ''; position: absolute; left: 21px; top: 50px; bottom: 4px; width: 2px; background: repeating-linear-gradient(to bottom, var(--af-azul-2) 0 6px, transparent 6px 12px); } .af-timeline li:last-child::after { display: none; } .af-timeline strong { display: block; font-family: var(--af-f-sub); font-size: 1.1rem; color: var(--af-oscuro); } .af-timeline span { color: var(--af-gris); } /* Elige receta */ .af-elige { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .af-elige__item { background: var(--af-crema); border-radius: var(--af-r-lg); padding: 28px 22px; text-align: center; transition: background .3s, transform .3s; } .af-elige__item:hover { background: #ffe6c2; transform: translateY(-6px) rotate(-1deg); } .af-elige__item span { font-size: 2.8rem; } .af-elige__item h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.35rem; color: var(--af-oscuro); margin: 10px 0 6px; } .af-elige__item p { margin: 0; color: var(--af-gris); } .af-nota { text-align: center; margin-top: 36px; color: var(--af-gris); } .af-nota a { color: var(--af-azul-p); font-weight: 600; } /* Beneficios */ .af-beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .af-beneficio { border-radius: var(--af-r-lg); padding: 32px 28px; background: #fff; border: 2px solid var(--af-azul); transition: all .3s; } .af-beneficio:hover { border-color: var(--af-azul-p); box-shadow: var(--af-sombra); transform: translateY(-6px); } .af-beneficio span { font-size: 2.5rem; display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--af-azul); } .af-beneficio h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.45rem; color: var(--af-oscuro); margin: 16px 0 6px; } .af-beneficio p { margin: 0; color: var(--af-gris); } /* Transición */ .af-transicion { background: #fff; border-radius: var(--af-r-lg); padding: 30px; box-shadow: var(--af-sombra); } .af-transicion__fila { display: grid; grid-template-columns: 90px 1fr 50px; gap: 14px; align-items: center; margin-bottom: 16px; } .af-transicion__dia { font-family: var(--af-f-sub); font-weight: 600; color: var(--af-oscuro); font-size: .92rem; } .af-transicion__barra { height: 18px; border-radius: 999px; background: var(--af-azul-2); overflow: hidden; } .af-transicion__barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--af-naranja), var(--af-naranja-2)); width: 0; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); } .af-transicion:not(.is-in) .af-transicion__barra i { width: 0 !important; } .af-transicion__pct { font-family: var(--af-f-titulo); color: var(--af-naranja-2); font-size: 1.1rem; } .af-transicion__ley { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--af-gris); margin: 10px 0 0; } .af-transicion__ley i, .af-transicion__ley b { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--af-naranja); } .af-transicion__ley b { background: var(--af-azul-2); } /* FAQ */ .af-faq { display: grid; gap: 14px; } .af-faq__item { background: #fff; border-radius: var(--af-r); padding: 0 26px; box-shadow: 0 10px 24px -16px rgba(15, 35, 80, .3); } .af-faq__item summary { list-style: none; cursor: pointer; padding: 22px 0; font-family: var(--af-f-sub); font-weight: 600; font-size: 1.05rem; color: var(--af-oscuro); display: flex; justify-content: space-between; gap: 16px; align-items: center; } .af-faq__item summary::-webkit-details-marker { display: none; } .af-faq__mas { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--af-azul); position: relative; transition: transform .3s, background .3s; } .af-faq__mas::before, .af-faq__mas::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--af-azul-p); transform: translate(-50%, -50%); } .af-faq__mas::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; } .af-faq__item[open] .af-faq__mas { background: var(--af-naranja); } .af-faq__item[open] .af-faq__mas::before, .af-faq__item[open] .af-faq__mas::after { background: #fff; } .af-faq__item[open] .af-faq__mas::after { transform: translate(-50%, -50%) rotate(0); } .af-faq__item p { margin: 0 0 22px; color: var(--af-gris); line-height: 1.65; } /* Contacto */ .af-contacto { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: start; } .af-canal { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--af-r); background: var(--af-crema); margin-bottom: 12px; text-decoration: none !important; color: var(--af-oscuro) !important; transition: transform .25s; } a.af-canal:hover { transform: translateX(6px); } .af-canal .af-ico { width: 46px; height: 46px; padding: 11px; border-radius: 14px; color: #fff; background: var(--af-naranja); } .af-canal--wa .af-ico { background: var(--af-wa); } .af-canal--fb .af-ico { background: #1877f2; } .af-canal--ig .af-ico { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); } .af-canal span { font-family: var(--af-f-sub); font-weight: 600; font-size: 1.05rem; display: flex; flex-direction: column; } .af-canal small { font-family: var(--af-f-texto); font-weight: 400; font-size: .8rem; color: var(--af-gris); } .af-form { background: #fff; border-radius: var(--af-r-lg); padding: clamp(24px, 4vw, 42px); box-shadow: var(--af-sombra); border-top: 6px solid var(--af-naranja); } .af-form h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.8rem; color: var(--af-oscuro); margin: 0 0 4px; } .af-form__sub { color: var(--af-gris); margin: 0 0 22px; } .af-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .af-form label { display: block; font-family: var(--af-f-sub); font-weight: 600; font-size: .88rem; color: var(--af-oscuro); margin-bottom: 16px; } .af-form input, .af-form select, .af-form textarea { display: block; width: 100%; margin-top: 7px; font-family: var(--af-f-texto); font-size: 1rem; border: 2px solid var(--af-azul); background: #fbfcff; border-radius: 14px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; } .af-form input:focus, .af-form select:focus, .af-form textarea:focus { outline: none; border-color: var(--af-naranja); box-shadow: 0 0 0 4px rgba(255, 156, 0, .15); } .af-form .af-btn { width: 100%; margin-top: 4px; } /* WhatsApp flotante */ .af-wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 999; display: flex; align-items: center; gap: 10px; text-decoration: none !important; background: var(--af-wa); color: #fff !important; border-radius: 999px; padding: 12px; box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .7); transition: padding .3s; } .af-wa-float .af-ico { width: 34px; height: 34px; } .af-wa-float::before { content: ''; position: absolute; inset: 0; border-radius: inherit; animation: af-pulso-wa 2.2s infinite; } @keyframes af-pulso-wa { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); } 100% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); } } .af-wa-float__txt { max-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--af-f-sub); font-weight: 600; transition: max-width .4s, margin .4s; } .af-wa-float:hover { padding-right: 20px; } .af-wa-float:hover .af-wa-float__txt { max-width: 200px; } /* Animación de entrada (el contenido SIEMPRE es visible; solo se agrega un rebote al aparecer) */ [data-reveal].is-in { animation: af-pop .8s cubic-bezier(.2, 1.4, .4, 1) backwards; animation-delay: calc(var(--d, 0) * .1s); } @keyframes af-pop { 0% { transform: translateY(26px) scale(.97); } 100% { transform: none; } } .af-card--naranja[data-reveal].is-in { animation-name: af-pop-n; } @keyframes af-pop-n { 0% { transform: translateY(12px) scale(.97); } 100% { transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition: none !important; } } /* Ilustración de respaldo cuando falta una imagen */ .af-ph { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: inherit; background: linear-gradient(135deg, var(--af-azul), var(--af-crema)); overflow: hidden; } .af-ph span { font-size: 4rem; line-height: 1; filter: drop-shadow(0 12px 14px rgba(15, 35, 80, .2)); } /* Ingredientes flotando alrededor del plato del hero */ .af-ingflot span { position: absolute; z-index: 4; white-space: nowrap; 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, .5); animation: af-ingflot 5s ease-in-out infinite; animation-delay: calc(var(--p) * -1.2s); } .af-ingflot span:nth-child(1) { left: -4%; top: 22%; } .af-ingflot span:nth-child(2) { right: -2%; top: 48%; } .af-ingflot span:nth-child(3) { left: 4%; bottom: 10%; } .af-ingflot span:nth-child(4) { right: 10%; bottom: 2%; } @keyframes af-ingflot { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(3deg); } } /* Burbujas de ingredientes que suben en el fondo */ .af-burbujas { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .af-burbujas span { position: absolute; bottom: -60px; font-size: 2.2rem; opacity: .5; animation: af-sube 14s linear infinite; } .af-burbujas span:nth-child(1) { left: 6%; animation-delay: 0s; } .af-burbujas span:nth-child(2) { left: 22%; animation-delay: -4s; font-size: 1.6rem; } .af-burbujas span:nth-child(3) { left: 38%; animation-delay: -8s; } .af-burbujas span:nth-child(4) { left: 55%; animation-delay: -2s; font-size: 1.8rem; } .af-burbujas span:nth-child(5) { left: 70%; animation-delay: -10s; } .af-burbujas span:nth-child(6) { left: 84%; animation-delay: -6s; font-size: 1.5rem; } .af-burbujas span:nth-child(7) { left: 92%; animation-delay: -12s; } .af-burbujas span:nth-child(8) { left: 14%; animation-delay: -7s; font-size: 1.4rem; } @keyframes af-sube { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-120vh) rotate(360deg); } } /* ========================================================= GUÍA DE PORCIONES INTERACTIVA ========================================================= */ .af-guia { position: relative; background: #fff; color: var(--af-texto); border-radius: 40px; padding: clamp(22px, 4vw, 46px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); } .af-guia::before { /* borde punteado animado */ content: ''; position: absolute; inset: 10px; border: 3px dashed var(--af-azul-2); border-radius: 32px; pointer-events: none; } .af-guia, .af-guia * { box-sizing: border-box; } /* Selector perro / gato */ .af-guia__especie { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(420px, 100%); margin: 0 auto 34px; background: var(--af-azul); border-radius: 999px; padding: 6px; z-index: 1; } .af-guia__pill-bg { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); background: linear-gradient(135deg, var(--af-naranja), var(--af-naranja-2)); border-radius: 999px; box-shadow: var(--af-sombra-n); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); } .af-guia[data-sel="gato"] .af-guia__pill-bg { transform: translateX(100%); } .af-guia__esp { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font-family: var(--af-f-titulo); font-size: 1.5rem; color: var(--af-azul-o); padding: 12px 10px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: color .3s; } .af-guia__esp.is-on { color: #fff; } .af-guia__esp-em { font-size: 1.8rem; display: inline-block; } .af-guia__esp.is-on .af-guia__esp-em { animation: af-menea 1.2s ease-in-out infinite; } @keyframes af-menea { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg) scale(1.1); } } .af-guia__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(18px, 3vw, 36px); align-items: center; } .af-guia__paso { display: flex; align-items: center; gap: 10px; font-family: var(--af-f-sub); font-weight: 600; color: var(--af-oscuro); margin: 0 0 14px; } .af-guia__paso b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--af-azul-p); color: #fff; font-family: var(--af-f-titulo); font-weight: 400; } /* Chips de peso */ .af-guia__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .af-guia__chip { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; background: var(--af-azul); border: 3px solid transparent; border-radius: 20px; padding: 12px 8px; font-family: var(--af-f-sub); color: var(--af-oscuro); transition: all .3s cubic-bezier(.3, 1.5, .5, 1); } .af-guia__chip:hover { border-color: var(--af-cielo); transform: translateY(-3px); } .af-guia__chip-em { font-size: calc(1.9rem * var(--s, 1)); line-height: 1.1; display: inline-block; transition: transform .3s; } .af-guia__chip strong { font-size: 1rem; } .af-guia__chip.is-on { background: var(--af-azul-p); color: #fff; transform: scale(1.05); box-shadow: 0 14px 26px -12px rgba(23, 105, 224, .8); } .af-guia__chip.is-on .af-guia__chip-em { animation: af-bota 1.4s ease-in-out infinite; } /* Actividad */ .af-guia__actividad { margin-top: 22px; transition: opacity .3s, max-height .4s; max-height: 200px; overflow: hidden; } .af-guia[data-sel="gato"] .af-guia__actividad { opacity: 0; max-height: 0; margin-top: 0; } .af-guia__toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .af-guia__toggle button { cursor: pointer; border: 2px solid var(--af-azul-2); background: #fff; border-radius: 14px; padding: 10px 6px; font-family: var(--af-f-sub); font-weight: 600; font-size: .9rem; color: var(--af-oscuro); transition: all .25s; } .af-guia__toggle button.is-on { background: var(--af-naranja); border-color: var(--af-naranja); color: #fff; } /* Escena del plato */ .af-guia__escena { container-type: inline-size; position: relative; aspect-ratio: 1; display: grid; place-items: end center; padding-bottom: 12%; } .af-guia__escena::before { /* halo */ content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, #fff3e2 0 45%, #e8f3ff 46% 70%, transparent 71%); animation: af-halo 4s ease-in-out infinite; } @keyframes af-halo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .af-guia__orbita { position: absolute; inset: 0; animation: af-giro 22s linear infinite; } .af-guia__orbita span { position: absolute; left: 50%; top: 50%; font-size: 1.9rem; width: 52px; height: 52px; margin: -26px; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: 0 10px 20px -10px rgba(15, 35, 80, .45); --a: calc(var(--n) * 60deg); } .af-guia__orbita span:nth-child(1) { --n: 0; } .af-guia__orbita span:nth-child(2) { --n: 1; } .af-guia__orbita span:nth-child(3) { --n: 2; } .af-guia__orbita span:nth-child(4) { --n: 3; } .af-guia__orbita span:nth-child(5) { --n: 4; } .af-guia__orbita span:nth-child(6) { --n: 5; } .af-guia__orbita span { transform: rotate(var(--a)) translateY(-44cqw) rotate(calc(var(--a) * -1)); } .af-guia__vapor { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); display: flex; gap: 18px; z-index: 2; } .af-guia__vapor i { width: 10px; height: 46px; border-radius: 10px; background: linear-gradient(to top, rgba(23, 105, 224, .35), transparent); animation: af-vapor 2.4s ease-in-out infinite; } .af-guia__vapor i:nth-child(2) { animation-delay: .6s; height: 60px; } .af-guia__vapor i:nth-child(3) { animation-delay: 1.2s; } @keyframes af-vapor { 0% { transform: translateY(20px) scaleY(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-30px) scaleY(1.2) skewX(12deg); opacity: 0; } } .af-guia__plato { position: relative; width: 78%; z-index: 3; animation: af-plato 3.5s ease-in-out infinite; } @keyframes af-plato { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-4px); } } .af-guia__plato.is-pum { animation: af-pum .5s cubic-bezier(.3, 1.6, .5, 1); } @keyframes af-pum { 0% { transform: scale(1); } 40% { transform: scale(1.08, .92); } 100% { transform: scale(1); } } .af-guia__bowl { display: block; width: 100%; height: auto; position: relative; z-index: 2; filter: drop-shadow(0 16px 20px rgba(255, 122, 0, .4)); } .af-guia__sombra { display: block; width: 80%; height: 16px; margin: 6px auto 0; border-radius: 50%; background: rgba(15, 35, 80, .18); filter: blur(4px); } .af-guia__comida { position: absolute; left: 14%; right: 14%; bottom: 78%; z-index: 3; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; } .af-guia__comida span { display: none; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1; margin: -6px -3px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .15)); } .af-guia__comida span.is-on { display: inline-block; animation: af-cae .6s cubic-bezier(.3, 1.5, .5, 1) both, af-tiembla 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .05s), calc(.6s + var(--i) * .15s); } @keyframes af-cae { 0% { transform: translateY(-160px) rotate(-90deg); opacity: 0; } 70% { opacity: 1; } 100% { transform: none; } } @keyframes af-tiembla { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg) translateY(-3px); } } /* Resultado */ .af-guia__resultado { text-align: center; } .af-guia__resultado .af-guia__paso { justify-content: center; } .af-guia__gramos { white-space: nowrap; font-family: var(--af-f-titulo); font-size: clamp(2.4rem, 3.8vw, 3.6rem); line-height: 1; color: var(--af-naranja-2); letter-spacing: -.02em; } .af-guia__gramos small { font-size: .45em; margin-left: 4px; color: var(--af-azul-p); } .af-guia__sub { margin: 6px 0 14px; color: var(--af-gris); font-weight: 500; } .af-guia__reco { display: inline-block; background: var(--af-crema); color: var(--af-oscuro); border-radius: 999px; padding: 8px 16px; font-family: var(--af-f-sub); font-size: .92rem; margin-bottom: 14px; } .af-guia__reco strong { color: var(--af-naranja-2); } .af-guia[data-sel="gato"] .af-guia__reco { display: none; } .af-guia__kcal { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--af-azul); border-radius: 18px; padding: 12px; font-family: var(--af-f-sub); color: var(--af-oscuro); } .af-guia__kcal strong { color: var(--af-azul-p); font-size: 1.15rem; } .af-guia__kcal-ico { font-size: 1.6rem; animation: af-llama 1s ease-in-out infinite alternate; display: inline-block; } @keyframes af-llama { from { transform: scale(1) rotate(-6deg); } to { transform: scale(1.18) rotate(6deg); } } .af-guia__barra { height: 14px; border-radius: 999px; background: var(--af-azul); margin: 16px 0 10px; overflow: hidden; } .af-guia__barra i { display: block; height: 100%; border-radius: inherit; transition: width .8s cubic-bezier(.3, 1.3, .5, 1); background: repeating-linear-gradient(-45deg, var(--af-naranja) 0 12px, var(--af-naranja-2) 12px 24px); background-size: 34px 34px; animation: af-rayas 1s linear infinite; } @keyframes af-rayas { to { background-position: 34px 0; } } .af-guia__tip { margin: 0; font-size: .9rem; color: var(--af-gris); } /* Todas las porciones */ .af-guia__todos { position: relative; z-index: 1; margin-top: 34px; padding-top: 26px; border-top: 2px dashed var(--af-azul-2); } .af-guia__todos-t { text-align: center; font-family: var(--af-f-sub); font-weight: 600; color: var(--af-oscuro); margin: 0 0 18px; } .af-guia__todos-t span { font-weight: 400; color: var(--af-gris); } .af-guia__minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .af-guia__mini { cursor: pointer; border: 3px solid transparent; background: var(--af-crema); border-radius: 22px; padding: 16px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--af-f-sub); color: var(--af-oscuro); transition: all .3s cubic-bezier(.3, 1.5, .5, 1); } .af-guia__mini:hover { transform: translateY(-4px); } .af-guia__mini.is-on { border-color: var(--af-naranja); background: #fff; box-shadow: var(--af-sombra-n); } .af-guia__mini strong { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.3rem; } .af-guia__mini span:last-child { font-size: .85rem; color: var(--af-gris); } .af-guia__mini-plato { position: relative; width: 70px; height: 36px; border-radius: 0 0 40px 40px; overflow: hidden; margin-bottom: 8px; background: var(--af-azul-2); border-top: 4px solid var(--af-azul-p); } .af-guia__mini-plato i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, var(--af-naranja-2), var(--af-naranja)); transition: height .6s; } .af-guia__mini-plato i::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; height: 8px; background: radial-gradient(circle at 6px 4px, var(--af-naranja) 5px, transparent 6px) 0 0/12px 8px repeat-x; animation: af-olas 1.2s linear infinite; } @keyframes af-olas { to { background-position: 12px 0; } } .af-guia__mini.is-on .af-guia__mini-plato { animation: af-bota 1.6s ease-in-out infinite; } @media (max-width: 1024px) { .af-guia__grid { grid-template-columns: 1fr 1fr; } .af-guia__escena { grid-column: 1 / -1; order: -1; max-width: 420px; width: 100%; margin: 0 auto; } } @media (max-width: 640px) { .af-guia__grid { grid-template-columns: 1fr; } .af-guia__minis { grid-template-columns: repeat(2, 1fr); } .af-guia__orbita span { width: 42px; height: 42px; margin: -21px; font-size: 1.5rem; } .af-guia__esp { font-size: 1.25rem; } } /* ========================================================= PUNCH: fondos con profundidad, texturas y efectos ========================================================= */ :root { --af-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Manchas de color que flotan detrás de las secciones claras */ .af-sec:not(.af-sec--azulf):not(.af-envios)::before, .af-sec:not(.af-sec--azulf):not(.af-envios)::after { content: ''; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(70px); opacity: .45; animation: af-deriva 16s ease-in-out infinite alternate; } .af-sec:not(.af-sec--azulf):not(.af-envios)::before { width: 420px; height: 420px; top: -140px; right: -120px; background: radial-gradient(circle, rgba(255, 156, 0, .55), transparent 70%); } .af-sec:not(.af-sec--azulf):not(.af-envios)::after { width: 480px; height: 480px; bottom: -180px; left: -160px; background: radial-gradient(circle, rgba(56, 182, 255, .5), transparent 70%); animation-delay: -8s; } @keyframes af-deriva { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.15); } 100% { transform: translate(-30px, 50px) scale(.95); } } /* Variantes de fondo */ .af-sec--crema { background: var(--af-grano), radial-gradient(90% 70% at 100% 0%, #ffe3bd 0%, transparent 60%), linear-gradient(180deg, #fff7ec, #fff3e2); } .af-sec--azul { background: var(--af-grano), radial-gradient(circle at 1px 1px, rgba(23, 105, 224, .16) 1.2px, transparent 1.6px) 0 0/22px 22px, linear-gradient(160deg, #eef7ff 0%, #e2efff 100%); } .af-sec--mesh { background: var(--af-grano), linear-gradient(120deg, #fff7ec, #eaf4ff, #fff1de, #e6f1ff); background-size: auto, 300% 300%; animation: af-mesh 18s ease infinite; } @keyframes af-mesh { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } } .af-sec--puntos { background: radial-gradient(circle at 1px 1px, rgba(255, 122, 0, .22) 1.3px, transparent 1.7px) 0 0/26px 26px, #fff; } .af-sec--azulf { background: var(--af-grano), radial-gradient(60% 50% at 90% 10%, rgba(255, 156, 0, .35), transparent 70%), radial-gradient(120% 120% at 0% 0%, #38b6ff 0%, var(--af-azul-p) 40%, var(--af-azul-o) 100%); } .af-sec--azulf::after { /* anillos decorativos */ content: ''; position: absolute; width: 520px; height: 520px; left: -200px; bottom: -260px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .06); box-shadow: 0 0 0 60px rgba(255, 255, 255, .03); animation: af-giro 60s linear infinite; pointer-events: none; } .af-envios__velo { background-image: var(--af-grano), linear-gradient(90deg, rgba(12, 60, 140, .95), rgba(23, 105, 224, .75)); } .af-hero__velo { background-image: var(--af-grano), linear-gradient(100deg, rgba(12, 60, 140, .9) 0%, rgba(23, 105, 224, .75) 50%, rgba(56, 182, 255, .45) 100%); } .af-phero--naranja { background: var(--af-grano), radial-gradient(50% 60% at 90% 100%, rgba(56, 182, 255, .45), transparent 70%), radial-gradient(120% 140% at 10% 0%, #ffc15a 0%, var(--af-naranja) 40%, var(--af-naranja-2) 100%); } .af-phero--azul { background: var(--af-grano), radial-gradient(50% 60% at 90% 100%, rgba(255, 156, 0, .45), transparent 70%), radial-gradient(120% 140% at 10% 0%, #38b6ff 0%, var(--af-azul-p) 45%, var(--af-azul-o) 100%); } .af-cta__box { background: var(--af-grano), radial-gradient(60% 80% at 100% 0%, rgba(255, 156, 0, .5), transparent 60%), linear-gradient(135deg, var(--af-azul-o) 0%, var(--af-azul-p) 60%, var(--af-cielo) 100%); } /* Texto con degradado animado */ .af-grad { background: linear-gradient(90deg, var(--af-naranja-2), #ff5e00, var(--af-azul-p), var(--af-azul-o), var(--af-naranja-2)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; animation: af-grad 6s linear infinite; } @keyframes af-grad { to { background-position: 300% 0; } } .af-h2 { text-shadow: 0 2px 0 rgba(255, 255, 255, .6); } .af-h2--blanco { text-shadow: 0 4px 24px rgba(0, 0, 0, .18); } .af-kicker::before { display: inline-block; animation: af-menea 2s ease-in-out infinite; } .af-hero__t { text-shadow: 0 6px 30px rgba(12, 60, 140, .35); } [data-wiggle] { display: inline-block; animation: af-rebota-t 2.8s ease-in-out infinite; } @keyframes af-rebota-t { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.06); } } /* Tarjetas con inclinación 3D y reflejo */ .af-tilt { position: relative; transform-style: preserve-3d; will-change: transform; } .af-tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) !important; } .af-tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), transparent 45%); opacity: 0; transition: opacity .3s; } .af-tilt:hover::after { opacity: 1; } /* ================= Menú fijo al hacer scroll ================= */ .af-header-fijo { position: fixed !important; top: var(--af-top, 0px); left: 0; right: 0; z-index: 999; animation: af-baja .45s cubic-bezier(.2, .9, .3, 1); box-shadow: 0 12px 30px -14px rgba(15, 35, 80, .4); } .af-header-fijo [data-row] { background: rgba(255, 255, 255, .86) !important; -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } .af-header-fijo [data-row="middle"] { --height: 68px !important; } .af-header-fijo .site-logo-container img, .af-header-fijo [data-id="logo"] img { max-height: 46px !important; width: auto; transition: max-height .3s; } @keyframes af-baja { from { transform: translateY(-110%); } to { transform: none; } } /* Subrayado animado en el menú de Blocksy */ .ct-header .ct-menu-link, .ct-header .menu > li > a { position: relative; } .ct-header .menu > li > .ct-menu-link::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 18%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--af-naranja), var(--af-azul-p)); transform: scaleX(0); transition: transform .3s; } .ct-header .menu > li:hover > .ct-menu-link::after, .ct-header .menu > li.current-menu-item > .ct-menu-link::after { transform: scaleX(1); } /* Barra de progreso de lectura */ .af-progreso { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 1001; pointer-events: none; background: linear-gradient(90deg, var(--af-naranja), var(--af-naranja-2), var(--af-azul-p), var(--af-cielo)); transform: scaleX(0); transform-origin: left; } .admin-bar .af-progreso { top: 32px; } /* ================= Puntero de huellita ================= */ html.af-con-cursor, html.af-con-cursor * { cursor: none !important; } html.af-con-cursor input, html.af-con-cursor textarea, html.af-con-cursor select, html.af-con-cursor [contenteditable] { cursor: text !important; } html.af-con-cursor select { cursor: pointer !important; } .af-puntero, .af-puntero-halo { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 10001; transition: opacity .3s; } .af-puntero { width: 0; height: 0; } .af-puntero__pata { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; color: var(--af-naranja); filter: drop-shadow(0 0 0 #fff) drop-shadow(0 3px 6px rgba(15, 35, 80, .45)); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), color .25s, opacity .2s; } .af-puntero__pata svg { width: 100%; height: 100%; fill: currentColor; stroke: #fff; stroke-width: 3px; paint-order: stroke; } .af-puntero__hueso { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; font-size: 30px; line-height: 40px; text-align: center; opacity: 0; transform: scale(.3) rotate(-40deg); transition: all .3s cubic-bezier(.3, 1.6, .5, 1); } .af-puntero.is-link .af-puntero__pata { transform: scale(.3); opacity: 0; } .af-puntero.is-link .af-puntero__hueso { opacity: 1; transform: scale(1) rotate(-20deg); animation: af-hueso .8s ease-in-out infinite alternate; } @keyframes af-hueso { from { transform: scale(1) rotate(-25deg); } to { transform: scale(1.15) rotate(15deg); } } .af-puntero.is-click .af-puntero__pata { transform: scale(.7); color: var(--af-azul-p); } .af-puntero-halo { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; z-index: 10000; background: radial-gradient(circle, rgba(255, 156, 0, .28), rgba(56, 182, 255, .12) 55%, transparent 70%); transition: width .3s, height .3s, margin .3s, opacity .3s; } .af-puntero-halo.is-link { width: 110px; height: 110px; margin: -55px 0 0 -55px; background: radial-gradient(circle, rgba(23, 105, 224, .25), rgba(255, 156, 0, .12) 55%, transparent 70%); } /* Rastro de huellas */ .af-huella { position: fixed; z-index: 9999; pointer-events: none; display: block; transform: translate(-50%, -50%) rotate(var(--r)); animation: af-huella 1.8s ease-out forwards; filter: drop-shadow(0 2px 3px rgba(15, 35, 80, .25)); } .af-huella svg { width: 100%; height: 100%; fill: currentColor; } @keyframes af-huella { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.6); } 12% { opacity: .95; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); } 70% { opacity: .7; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(.8); } } .af-huella--boom { width: 24px; height: 24px; animation: af-boom .8s cubic-bezier(.2, .8, .3, 1) forwards; } @keyframes af-boom { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(.4); } 100% { opacity: 0; transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) rotate(var(--r)) scale(1.2); } } /* ================= Nutrientes ================= */ .af-nutris { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .af-nutri { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 2px solid rgba(255, 255, 255, .9); border-radius: 26px; padding: 26px 22px 22px; overflow: hidden; box-shadow: 0 18px 36px -22px rgba(15, 35, 80, .45); transition: transform .3s; } .af-nutri__burbuja { position: absolute; right: -26px; top: -26px; width: 96px; height: 96px; border-radius: 50%; background: var(--c); opacity: .18; animation: af-halo 3s ease-in-out infinite; animation-delay: calc(var(--d) * -.7s); } .af-nutri h3 { position: relative; font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.45rem; color: var(--c); margin: 0 0 4px; } .af-nutri p { position: relative; margin: 0 0 14px; color: var(--af-oscuro); font-weight: 500; } .af-nutri small { display: inline-block; background: var(--af-azul); color: var(--af-oscuro); border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-family: var(--af-f-sub); } /* ================= Cómo pedir ================= */ .af-pedir { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 40px; } .af-pedir__linea { position: absolute; left: 12%; right: 12%; top: 42px; width: 76%; height: 40px; z-index: 0; overflow: visible; } .af-pedir__linea path { fill: none; stroke: var(--af-naranja); stroke-width: 4; stroke-dasharray: 10 12; stroke-linecap: round; animation: af-hormigas 1.4s linear infinite; } @keyframes af-hormigas { to { stroke-dashoffset: -44; } } .af-pedir__paso { position: relative; z-index: 1; text-align: center; } .af-pedir__ico { position: relative; width: 108px; height: 108px; margin: 0 auto 18px; border-radius: 34px; display: grid; place-items: center; background: linear-gradient(145deg, #fff, var(--af-azul)); box-shadow: 0 20px 40px -18px rgba(23, 105, 224, .6), inset 0 -6px 0 rgba(23, 105, 224, .08); transform: rotate(-6deg); animation: af-flota 4s ease-in-out infinite; } .af-pedir__paso:nth-child(3) .af-pedir__ico { animation-delay: -1.3s; } .af-pedir__paso:nth-child(4) .af-pedir__ico { animation-delay: -2.6s; } .af-pedir__ico span { font-size: 3.2rem; } .af-pedir__ico b { position: absolute; top: -10px; right: -10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--af-naranja); color: #fff; font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.2rem; border: 3px solid #fff; } .af-pedir__paso h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.6rem; color: var(--af-oscuro); margin: 0 0 8px; } .af-pedir__paso p { margin: 0 auto; max-width: 300px; color: var(--af-gris); } /* ================= Perros y gatos ================= */ .af-pg { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .af-pg__card { position: relative; overflow: hidden; border-radius: var(--af-r-lg); padding: clamp(30px, 4vw, 50px); color: #fff; min-height: 300px; box-shadow: 0 30px 60px -30px rgba(15, 35, 80, .6); } .af-pg__card--perro { background: var(--af-grano), radial-gradient(70% 70% at 100% 100%, rgba(255, 255, 255, .25), transparent 60%), linear-gradient(140deg, #ffb13d, var(--af-naranja-2)); } .af-pg__card--gato { background: var(--af-grano), radial-gradient(70% 70% at 100% 100%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(140deg, var(--af-cielo), var(--af-azul-o)); } .af-pg__em { position: absolute; right: 6%; bottom: -6%; font-size: clamp(7rem, 14vw, 11rem); opacity: .95; animation: af-bota 3.2s ease-in-out infinite; filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .2)); } .af-pg__card--gato .af-pg__em { animation-delay: -1.6s; } .af-pg__card h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3rem); margin: 0 0 8px; color: #fff; } .af-pg__card p { max-width: 62%; margin: 0 0 20px; color: rgba(255, 255, 255, .92); font-size: 1.05rem; } .af-pg__dato { display: inline-block; background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 18px; padding: 12px 18px; margin-bottom: 18px; font-family: var(--af-f-sub); } .af-pg__dato strong { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.6rem; } .af-pg__card .af-link { color: #fff !important; } @media (max-width: 1024px) { .af-nutris { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .af-pedir { grid-template-columns: 1fr; gap: 40px; } .af-pedir__linea { display: none; } .af-pg { grid-template-columns: 1fr; } .af-pg__card p { max-width: 100%; } .af-pg__em { font-size: 6rem; opacity: .35; } } @media (max-width: 480px) { .af-nutris { grid-template-columns: 1fr 1fr; gap: 12px; } .af-nutri { padding: 20px 16px 16px; } .af-nutri h3 { font-size: 1.15rem; } .af-nutri p { font-size: .88rem; } } /* ========================================================= AJUSTES RESPONSIVE (sin ocultar contenido) ========================================================= */ html, body { overflow-x: clip; } .af-foto-redonda .af-ph, .af-envios__img .af-ph { display: grid; place-items: center; } .af-foto-redonda .af-ph span { font-size: clamp(5rem, 12vw, 8rem); animation: af-bota 3s ease-in-out infinite; } .af-hero__sellos li { background: rgba(255, 255, 255, .12); padding: 8px 14px; border-radius: 999px; } img { max-width: 100%; height: auto; } @media (max-width: 1024px) { .af-hero__grid { gap: 30px; } .af-guia__todos-t { font-size: .95rem; } .af-contacto { gap: 30px; } .af-phero__t { font-size: clamp(2.2rem, 6vw, 3.4rem); } } @media (max-width: 860px) { .af-sec { padding: 64px 0; } .af-hero { padding-top: 40px; } .af-hero__t { font-size: clamp(2.3rem, 9vw, 3.4rem); } .af-hero__media { max-width: 360px; } .af-ingflot span:nth-child(1) { left: 0; top: 14%; } .af-ingflot span:nth-child(2) { right: 0; } .af-ingflot span:nth-child(3) { left: 0; } .af-ingflot span:nth-child(4) { right: 4%; } .af-circulo { max-width: 240px; } .af-circulo::before { inset: -12px; } .af-ing__bubble { max-width: 200px; } .af-ing__bubble span { font-size: 6rem; } .af-foto-redonda { transform: none; width: 100%; max-width: 520px; margin: 0 auto; } .af-split--top { margin-bottom: 36px; } .af-cta__box { padding: 44px 22px; } .af-card--naranja { transform: none; } .af-guia { border-radius: 30px; } .af-guia::before { inset: 7px; border-radius: 24px; } } @media (max-width: 600px) { .af-kicker { font-size: .72rem; letter-spacing: .08em; padding: 6px 12px; } .af-h2 { font-size: clamp(1.75rem, 7.6vw, 2.3rem); } .af-lead { font-size: 1rem; } .af-hero__sellos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; } .af-hero__sellos li { flex-direction: column; gap: 4px; padding: 10px 6px; border-radius: 16px; font-size: .78rem; text-align: center; justify-content: center; } .af-sticker { width: 78px; height: 78px; font-size: 1.35rem; right: 0; top: 0; } .af-stats { gap: 8px; } .af-stats div { padding: 14px 6px; } .af-stats strong { font-size: 1.5rem; } .af-stats span { font-size: .75rem; display: block; line-height: 1.25; } .af-cinta { margin: -8px 0 0; } .af-cinta__track { font-size: 1.05rem; gap: 18px; } .af-ing { padding: 16px; border-radius: 26px; } .af-ing__nav { gap: 6px; margin-bottom: 18px; } .af-checks li { font-size: .95rem; } .af-nutri__burbuja { width: 64px; height: 64px; right: -20px; top: -20px; } .af-nutri small { font-size: .72rem; padding: 5px 9px; } .af-receta { border-radius: 24px; } .af-receta__tags { left: 8px; bottom: 8px; gap: 4px; } .af-receta__tags span { font-size: .66rem; padding: 4px 7px; } .af-receta__img .af-ph span { font-size: 3.6rem; } .af-receta .af-link { font-size: .85rem; } .af-pg__card { min-height: 0; padding: 28px 22px; } .af-pg__dato { display: block; } .af-pg__dato strong { font-size: 1.35rem; } .af-card { padding: 26px 22px; } .af-envios__img .af-ph span { font-size: 7rem; } .af-pedir__ico { width: 92px; height: 92px; } .af-pedir__ico span { font-size: 2.7rem; } .af-guia__gramos { font-size: clamp(2.3rem, 12vw, 3rem); } .af-guia__comida span { font-size: 1.55rem; } .af-faq__item { padding: 0 18px; } .af-faq__item summary { font-size: .98rem; padding: 18px 0; } .af-transicion { padding: 20px; } .af-transicion__fila { grid-template-columns: 74px 1fr 42px; gap: 10px; } .af-canal { padding: 12px 14px; } .af-form { border-radius: 26px; } .af-phero { padding: 56px 0 84px; } .af-phero__p { font-size: 1rem; } .af-timeline li { padding-left: 56px; } .af-wa-float .af-ico { width: 30px; height: 30px; } } @media (max-width: 380px) { .af-recetas { grid-template-columns: 1fr; } .af-nutris { grid-template-columns: 1fr; } .af-pasos { grid-template-columns: 1fr; } .af-guia__chips { gap: 8px; } .af-hero__sellos li { font-size: .72rem; } } /* Rejillas balanceadas en tablet */ .af-recetas { display: flex; flex-wrap: wrap; justify-content: center; } .af-recetas > .af-receta { flex: 1 1 210px; max-width: calc(20% - 18px); min-width: 200px; } @media (max-width: 1180px) { .af-recetas > .af-receta { max-width: calc(33.333% - 15px); } } @media (max-width: 1024px) { .af-cards3 > :last-child:nth-child(odd), .af-beneficios > :last-child:nth-child(odd) { grid-column: 1 / -1; } .af-pg { grid-template-columns: 1fr; } .af-pg__card p { max-width: 70%; } } @media (max-width: 600px) { .af-recetas { gap: 14px; } .af-recetas > .af-receta { max-width: calc(50% - 7px); min-width: 0; flex-basis: calc(50% - 7px); } .af-cards3 > :last-child:nth-child(odd), .af-beneficios > :last-child:nth-child(odd) { grid-column: auto; } } @media (max-width: 380px) { .af-recetas > .af-receta { max-width: 100%; flex-basis: 100%; } } /* ========================================================= SISTEMA VISUAL COMÚN (armonía entre secciones) ========================================================= */ :root { --af-rad: 30px; --af-rad-s: 18px; --af-borde: 2px solid rgba(255, 255, 255, .95); --af-sombra-suave: 0 22px 44px -26px rgba(15, 35, 80, .45), 0 2px 0 rgba(15, 35, 80, .03); --af-gap: clamp(16px, 2.2vw, 26px); } @property --af-a { syntax: ''; inherits: true; initial-value: 0; } @property --af-b { syntax: ''; inherits: true; initial-value: 0; } .af-panel { position: relative; background: #fff; border: var(--af-borde); border-radius: var(--af-rad); box-shadow: var(--af-sombra-suave); padding: clamp(24px, 3vw, 34px); overflow: hidden; } .af-panel h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: var(--af-oscuro); margin: 14px 0 6px; } .af-panel__ico { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; font-size: 1.7rem; background: var(--af-crema); box-shadow: inset 0 -4px 0 rgba(255, 122, 0, .12); animation: af-flota 4.5s ease-in-out infinite; } .af-panel--naranja { 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; border-color: rgba(255, 255, 255, .5); } .af-panel--naranja h3 { color: #fff; } .af-panel--naranja .af-panel__ico { background: rgba(255, 255, 255, .22); box-shadow: none; } .af-resalta { position: relative; white-space: nowrap; color: var(--af-naranja); } .af-resalta::after { content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: .18em; border-radius: 99px; background: rgba(255, 156, 0, .35); z-index: -1; } .af-pills { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 0; padding: 0; } .af-pills li { font-family: var(--af-f-sub); font-weight: 600; font-size: .88rem; color: var(--af-azul-o); background: #fff; border: 2px solid var(--af-azul-2); border-radius: 999px; padding: 7px 16px; animation: af-pill 3s ease-in-out infinite; animation-delay: calc(var(--d) * .25s); } @keyframes af-pill { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px); border-color: var(--af-naranja); } } /* ================= Cinta doble ================= */ .af-cintas { position: relative; height: 128px; margin-top: -30px; overflow: hidden; z-index: 4; } .af-cinta2 { position: absolute; left: -5%; right: -5%; top: 50%; padding: 14px 0; overflow: hidden; } .af-cinta2--naranja { background: var(--af-naranja); transform: translateY(-50%) rotate(-2.2deg); box-shadow: 0 12px 26px -12px rgba(255, 122, 0, .6); } .af-cinta2--azul { background: var(--af-azul-p); transform: translateY(-50%) rotate(2.2deg); opacity: .95; } .af-cinta2__track { display: flex; align-items: center; gap: 22px; width: max-content; animation: af-marquee 32s linear infinite; font-family: var(--af-f-titulo); font-size: clamp(1.05rem, 1.8vw, 1.4rem); white-space: nowrap; color: var(--af-oscuro); } .af-cinta2--azul .af-cinta2__track { color: #fff; } .af-cinta2__track--inv { animation-direction: reverse; animation-duration: 38s; } .af-cinta2__track i { font-style: normal; color: #fff; } .af-cinta2--naranja .af-cinta2__track i { color: var(--af-oscuro); } /* ================= Recetas ================= */ .af-rcs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--af-gap); } .af-rc { flex: 0 0 calc((100% - 4 * var(--af-gap)) / 5); min-width: 0; display: flex; flex-direction: column; background: #fff; border: var(--af-borde); border-radius: var(--af-rad); box-shadow: var(--af-sombra-suave); overflow: hidden; transition: box-shadow .3s; } .af-rc:hover { box-shadow: 0 30px 50px -24px color-mix(in srgb, var(--c) 70%, #0f2350); } .af-rc__top { position: relative; aspect-ratio: 1 / .92; display: grid; place-items: center; background: var(--af-grano), radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 30%, #fff) 0 38%, color-mix(in srgb, var(--c) 16%, #fff) 39% 100%); } .af-rc__num { position: absolute; top: 14px; left: 16px; font-family: var(--af-f-titulo); font-size: 1.1rem; color: #fff; background: var(--c); border-radius: 12px; padding: 4px 10px; box-shadow: 0 8px 16px -8px var(--c); } .af-rc__plato { width: 62%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .55), 0 22px 30px -16px rgba(15, 35, 80, .45); animation: af-flota 4s ease-in-out infinite; animation-delay: calc(var(--d) * -.6s); } .af-rc__plato span { font-size: clamp(3rem, 4.6vw, 4.2rem); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); } .af-rc:hover .af-rc__plato span { transform: rotate(-14deg) scale(1.15); } .af-rc__foto { position: absolute; inset: 0; } .af-rc__foto img, .af-rc__foto .af-ph { width: 100%; height: 100%; object-fit: cover; } .af-rc__ola { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 26px; fill: #fff; } .af-rc__body { display: flex; flex-direction: column; gap: 8px; padding: 6px 20px 22px; flex: 1; } .af-rc__tags { display: flex; flex-wrap: wrap; gap: 5px; } .af-rc__tags span { font-family: var(--af-f-sub); font-weight: 600; font-size: .72rem; color: var(--af-oscuro); background: var(--af-azul); border-radius: 999px; padding: 4px 9px; } .af-rc h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.35rem; line-height: 1.15; color: var(--af-oscuro); margin: 4px 0 0; } .af-rc p { margin: 0; color: var(--af-gris); font-size: .92rem; line-height: 1.55; flex: 1; } .af-rc__cta { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none !important; font-family: var(--af-f-sub); font-weight: 600; font-size: .9rem; color: var(--c) !important; border: 2px solid color-mix(in srgb, var(--c) 30%, #fff); border-radius: 999px; padding: 9px 10px 9px 16px; transition: all .25s; } .af-rc__cta .af-ico { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--c); color: #fff; transition: transform .25s; } .af-rc__cta:hover { background: var(--c); color: #fff !important; } .af-rc__cta:hover .af-ico { transform: translateX(3px) rotate(-10deg); background: #fff; color: var(--c); } /* ================= Nutrientes (plato central) ================= */ .af-nts { display: grid; grid-template-columns: 1fr minmax(240px, 330px) 1fr; gap: var(--af-gap); align-items: center; } .af-nts__col { display: grid; gap: 14px; } .af-nt { position: relative; display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: var(--af-borde); border-radius: 24px; box-shadow: var(--af-sombra-suave); padding: 14px 16px; } .af-nt--izq { flex-direction: row-reverse; text-align: right; } .af-nt--izq .af-nt__txt small { margin-left: auto; } .af-nt::before { /* conector hacia el plato */ content: ''; position: absolute; top: 50%; width: calc(var(--af-gap) + 6px); border-top: 2px dashed color-mix(in srgb, var(--c) 55%, #fff); } .af-nt--izq::before { left: 100%; } .af-nt--der::before { right: 100%; } .af-nt__ico { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: color-mix(in srgb, var(--c) 16%, #fff); box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--c) 22%, transparent); animation: af-bota 3.2s ease-in-out infinite; animation-delay: calc(var(--d) * -.5s); } .af-nt__txt { display: flex; flex-direction: column; min-width: 0; } .af-nt h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.2rem; line-height: 1.1; color: var(--c); margin: 0; } .af-nt p { margin: 2px 0 6px; color: var(--af-oscuro); font-size: .9rem; font-weight: 500; } .af-nt small { align-self: flex-start; font-family: var(--af-f-sub); font-size: .74rem; color: var(--af-gris); background: var(--af-azul); border-radius: 999px; padding: 4px 10px; } .af-nts__centro { position: relative; aspect-ratio: 1; display: grid; place-items: center; container-type: inline-size; } .af-nts__aro { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--af-azul-2); animation: af-giro 28s linear infinite; } .af-nts__aro span { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.4rem; box-shadow: 0 10px 20px -10px rgba(15, 35, 80, .5); transform: rotate(calc(var(--k) * 72deg)) translateY(-50cqw) rotate(calc(var(--k) * -72deg)); } .af-nts__plato { position: relative; width: 64%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 35% 30%, #ffc76b, var(--af-naranja) 45%, var(--af-naranja-2)); box-shadow: 0 0 0 12px rgba(255, 255, 255, .8), 0 0 0 24px rgba(255, 156, 0, .15), 0 30px 50px -20px rgba(255, 122, 0, .7); animation: af-halo 4s ease-in-out infinite; } .af-nts__plato b { font-family: var(--af-f-titulo); font-weight: 400; color: #fff; font-size: 2.2rem; line-height: .9; } .af-nts__plato b small { display: block; font-family: var(--af-f-sub); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; } .af-nts__comida { position: absolute; top: 12%; font-size: 1.5rem; animation: af-tiembla 2.6s ease-in-out infinite; } .af-nts__vapor { position: absolute; top: -30px; display: flex; gap: 12px; } .af-nts__vapor i { width: 8px; height: 34px; border-radius: 8px; background: linear-gradient(to top, rgba(255, 156, 0, .45), transparent); animation: af-vapor 2.4s ease-in-out infinite; } .af-nts__vapor i:nth-child(2) { animation-delay: .7s; } .af-nts__vapor i:nth-child(3) { animation-delay: 1.4s; } /* ================= Perros y gatos ================= */ .af-mg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--af-gap); } .af-mg__card { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; border-radius: var(--af-rad); padding: clamp(26px, 3.4vw, 40px); color: #fff; overflow: hidden; border: 2px solid rgba(255, 255, 255, .35); box-shadow: 0 30px 60px -30px rgba(15, 35, 80, .6); } .af-mg__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-mg__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-mg__txt { min-width: 0; } .af-mg h3 { font-family: var(--af-f-titulo); font-weight: 400; color: #fff; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; margin: 0 0 10px; } .af-mg p { margin: 0 0 18px; color: rgba(255, 255, 255, .92); line-height: 1.55; } .af-mg__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .af-mg__stats div { background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--af-rad-s); padding: 12px 14px; } .af-mg__stats strong { display: block; font-family: var(--af-f-titulo); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.1; white-space: nowrap; } .af-mg__stats small { font-size: .8rem; opacity: .9; } .af-mg__btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--af-oscuro) !important; text-decoration: none !important; font-family: var(--af-f-sub); font-weight: 600; font-size: .95rem; border-radius: 999px; padding: 10px 10px 10px 18px; transition: transform .25s; } .af-mg__btn .af-ico { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--af-oscuro); color: #fff; } .af-mg__btn:hover { transform: translateX(4px); } .af-mg__avatar { position: relative; width: clamp(120px, 14vw, 170px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 12px rgba(255, 255, 255, .1), 0 0 0 24px rgba(255, 255, 255, .06); } .af-mg__em { font-size: clamp(4.2rem, 7vw, 6rem); animation: af-bota 3.2s ease-in-out infinite; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .2)); } .af-mg__card--gato .af-mg__em { animation-delay: -1.6s; } .af-mg__orb { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.3rem; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .4); animation: af-ingflot 4s ease-in-out infinite; } .af-mg__orb--1 { top: -4px; right: -6px; } .af-mg__orb--2 { bottom: 0; left: -10px; animation-delay: -2s; } /* ================= Vísceras (bento) ================= */ .af-vs { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: var(--af-gap); } .af-vs__donas { grid-row: 1 / 3; display: flex; flex-direction: column; } .af-vs__sub { margin: 0 0 20px; color: var(--af-gris); } .af-vs__par { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: auto; } .af-dona { margin: 0; text-align: center; } .af-dona__aro { --af-a: var(--a); --af-b: var(--b); position: relative; width: min(190px, 100%); aspect-ratio: 1; margin: 0 auto 14px; border-radius: 50%; background: conic-gradient(from -90deg, var(--af-naranja-2) 0 calc(var(--af-a) * 1%), #ffc36b calc(var(--af-a) * 1%) calc(var(--af-b) * 1%), var(--af-azul) calc(var(--af-b) * 1%) 100%); display: grid; place-items: center; } .af-dona--azul .af-dona__aro { background: conic-gradient(from -90deg, var(--af-azul-p) 0 calc(var(--af-a) * 1%), var(--af-cielo) calc(var(--af-a) * 1%) calc(var(--af-b) * 1%), var(--af-crema) calc(var(--af-b) * 1%) 100%); } [data-reveal].is-in .af-dona__aro { animation: af-dona 1.6s cubic-bezier(.3, 1.2, .5, 1) both .3s; } @keyframes af-dona { from { --af-a: 0; --af-b: 0; } } .af-dona__aro::before { content: ''; position: absolute; inset: 18%; border-radius: 50%; background: #fff; box-shadow: inset 0 6px 14px rgba(15, 35, 80, .08); } .af-dona__aro::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px dashed var(--af-azul-2); animation: af-giro 20s linear infinite; } .af-dona__aro span { position: relative; font-size: 3rem; animation: af-bota 3s ease-in-out infinite; } .af-dona figcaption { font-size: .9rem; color: var(--af-gris); display: flex; flex-direction: column; align-items: center; } .af-dona figcaption strong { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.8rem; color: var(--af-naranja-2); line-height: 1; } .af-dona--azul figcaption strong { color: var(--af-azul-p); } .af-dona figcaption small { margin-top: 8px; font-family: var(--af-f-sub); font-weight: 600; font-size: .78rem; color: var(--af-oscuro); background: var(--af-crema); border-radius: 999px; padding: 5px 12px; } .af-vs__fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--af-rad-s); padding: 12px 14px; margin-top: 12px; } .af-vs__ani { font-size: 1.9rem; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .25); } .af-vs__fila small { display: block; font-size: .8rem; opacity: .9; } .af-vs__fila strong { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.7rem; line-height: 1; } .af-vs__fila em { font-style: normal; font-family: var(--af-f-sub); font-weight: 600; font-size: .75rem; background: #fff; color: var(--af-naranja-2); border-radius: 999px; padding: 5px 10px; white-space: nowrap; } .af-vs__tips ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; } .af-vs__tips li { display: flex; align-items: center; gap: 12px; background: var(--af-azul); border-radius: var(--af-rad-s); padding: 10px 14px; } .af-vs__tips li span { font-size: 1.4rem; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #fff; } .af-vs__tips li p { margin: 0; font-size: .95rem; } /* ================= Envíos: mapa con ruta ================= */ .af-envios { background: var(--af-navy); } .af-env { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center; } .af-resalta.af-resalta { color: var(--af-naranja); } .af-env__chips { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .af-env__chips li { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--af-rad-s); padding: 12px; } .af-env__chips .af-ico { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--af-naranja); color: #fff; flex: none; } .af-env__chips span { display: flex; flex-direction: column; font-size: .78rem; color: rgba(255, 255, 255, .75); line-height: 1.25; } .af-env__chips strong { font-family: var(--af-f-sub); font-size: .9rem; color: #fff; } .af-env__mapa { position: relative; } .af-env__svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .25)); } .af-env__calle { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 28; stroke-linecap: round; } .af-env__linea { fill: none; stroke: var(--af-naranja); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 14; animation: af-hormigas 1s linear infinite; } .af-env__base { fill: #fff; } .af-env__base--casa { fill: var(--af-naranja); } .af-env__onda { fill: rgba(255, 156, 0, .3); transform-box: fill-box; transform-origin: center; animation: af-onda 2s ease-out infinite; } @keyframes af-onda { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } .af-env__label { fill: #fff; font-family: var(--af-f-sub); font-weight: 600; font-size: 14px; } .af-env__flota { animation: af-bota 3s ease-in-out infinite; transform-box: fill-box; } .af-env__flota--2 { animation-delay: -1.5s; } .af-env__badge { position: absolute; top: 6%; left: 4%; background: #fff; color: var(--af-oscuro); font-family: var(--af-f-sub); font-weight: 600; font-size: .85rem; padding: 8px 14px; border-radius: 999px; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5); animation: af-ingflot 4s ease-in-out infinite; } .af-env__foto { position: absolute; right: -2%; bottom: -6%; width: 34%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: 0 20px 30px -14px rgba(0, 0, 0, .5); } .af-env__foto img { width: 100%; height: 100%; object-fit: cover; } /* ================= Productos ================= */ .af-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -16px 0 30px; } .af-filtros button { cursor: pointer; font-family: var(--af-f-sub); font-weight: 600; font-size: .9rem; color: var(--af-oscuro); background: #fff; border: 2px solid var(--af-azul-2); border-radius: 999px; padding: 9px 18px; transition: all .25s; } .af-filtros button:hover { border-color: var(--af-naranja); } .af-filtros button.is-on { background: var(--af-oscuro); border-color: var(--af-oscuro); color: #fff; } .af-prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--af-gap); } .af-prods--previa { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .af-prod { display: flex; flex-direction: column; background: #fff; border: var(--af-borde); border-radius: var(--af-rad); box-shadow: var(--af-sombra-suave); overflow: hidden; transition: opacity .3s, transform .3s; } .af-prod.is-oculto { display: none; } .af-prod__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--af-crema); } .af-prod__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .af-prod:hover .af-prod__img img { transform: scale(1.07); } .af-prod__img--previa { display: grid; place-items: center; background: var(--af-grano), radial-gradient(circle at 50% 45%, #fff 0 30%, color-mix(in srgb, var(--c, #ff9c00) 20%, #fff) 31% 100%); } .af-prod__emoji { font-size: 4.6rem; animation: af-bota 3s ease-in-out infinite; animation-delay: calc(var(--d) * -.5s); } .af-prod__badge { position: absolute; top: 12px; left: 12px; background: var(--af-naranja); color: #fff; font-family: var(--af-f-sub); font-weight: 600; font-size: .75rem; padding: 6px 12px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(255, 122, 0, .8); } .af-prod__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 18px; flex: 1; } .af-prod__cat { font-family: var(--af-f-sub); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--af-azul-p); } .af-prod h3 { font-family: var(--af-f-titulo); font-weight: 400; font-size: 1.3rem; line-height: 1.15; margin: 0; } .af-prod h3 a { color: var(--af-oscuro); text-decoration: none; } .af-prod p { margin: 0; color: var(--af-gris); font-size: .9rem; line-height: 1.5; flex: 1; } .af-prod__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 2px dashed var(--af-azul); } .af-prod__precio { font-family: var(--af-f-titulo); font-size: 1.35rem; color: var(--af-naranja-2); line-height: 1.1; } .af-prod__precio del { font-size: .8em; color: var(--af-gris); opacity: .7; margin-right: 4px; } .af-prod__precio ins { text-decoration: none; } .af-prod__precio--consulta { font-family: var(--af-f-sub); font-weight: 600; font-size: .85rem; color: var(--af-gris); } .af-prod__add { display: inline-flex !important; align-items: center; gap: 6px; flex: none; text-decoration: none !important; background: linear-gradient(135deg, var(--af-naranja), var(--af-naranja-2)) !important; color: #fff !important; font-family: var(--af-f-sub) !important; font-weight: 600 !important; font-size: .85rem !important; line-height: 1 !important; border: 0 !important; border-radius: 999px !important; padding: 10px 14px !important; box-shadow: 0 10px 20px -10px rgba(255, 122, 0, .9) !important; transition: transform .2s !important; } .af-prod__add:hover { transform: scale(1.06); } .af-prod__add .af-ico { width: 18px; height: 18px; } .af-prod__add--wa { background: var(--af-wa) !important; box-shadow: 0 10px 20px -10px rgba(37, 211, 102, .9) !important; } .af-prod__add.loading { opacity: .6; } .af-prod__add.added::after { content: ' ✓'; } .af-prod .added_to_cart { display: block; margin-top: 8px; font-family: var(--af-f-sub); font-weight: 600; font-size: .85rem; color: var(--af-azul-p); text-align: right; } .af-tienda__mas { margin-top: 40px; } .af-aviso-admin { max-width: 760px; margin: -10px auto 26px; background: #fff; border: 2px dashed var(--af-naranja); border-radius: var(--af-rad-s); padding: 14px 18px; font-size: .92rem; color: var(--af-oscuro); text-align: center; } /* ================= Responsive de las secciones nuevas ================= */ @media (max-width: 1180px) { .af-rc { flex-basis: calc((100% - 2 * var(--af-gap)) / 3); } } @media (max-width: 1100px) { .af-prods { grid-template-columns: repeat(3, 1fr); } .af-nts { grid-template-columns: 1fr 1fr; } .af-nts__centro { grid-column: 1 / -1; grid-row: 1; width: min(300px, 70%); margin: 10px auto 30px; } .af-nt--izq { flex-direction: row; text-align: left; } .af-nt--izq .af-nt__txt small { margin-left: 0; } .af-nt::before { display: none; } } @media (max-width: 960px) { .af-rc { flex-basis: calc((100% - var(--af-gap)) / 2); } .af-mg { grid-template-columns: 1fr; } .af-vs { grid-template-columns: 1fr 1fr; } .af-vs__donas { grid-column: 1 / -1; grid-row: auto; } .af-env { grid-template-columns: 1fr; } .af-env__mapa { max-width: 520px; margin: 0 auto; width: 100%; } .af-prods { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .af-cintas { height: 104px; margin-top: -24px; } .af-cinta2 { padding: 10px 0; } .af-rcs { --af-gap: 12px; } .af-rc { border-radius: 24px; } .af-rc__body { padding: 4px 14px 16px; } .af-rc h3 { font-size: 1.12rem; } .af-rc p { font-size: .84rem; } .af-rc__cta { font-size: .8rem; padding: 7px 7px 7px 12px; } .af-rc__cta .af-ico { width: 24px; height: 24px; padding: 5px; } .af-rc__tags span { font-size: .66rem; padding: 3px 7px; } .af-rc__num { font-size: .9rem; top: 10px; left: 10px; } .af-nts { grid-template-columns: 1fr; } .af-nts__col { gap: 10px; } .af-nt { padding: 12px 14px; } .af-mg__card { grid-template-columns: 1fr; text-align: left; padding-top: 28px; } .af-mg__avatar { position: absolute; top: 18px; right: 18px; width: 92px; } .af-mg__em { font-size: 3.4rem; } .af-mg__orb { width: 32px; height: 32px; font-size: 1rem; } .af-mg h3, .af-mg p { padding-right: 104px; } .af-mg p { padding-right: 0; } .af-mg h3 { min-height: 70px; display: flex; align-items: center; } .af-vs { grid-template-columns: 1fr; } .af-vs__par { gap: 12px; } .af-dona figcaption small { font-size: .7rem; padding: 4px 8px; } .af-env__chips { grid-template-columns: 1fr; } .af-env__badge { font-size: .75rem; } .af-prods { grid-template-columns: repeat(2, 1fr); gap: 12px; } .af-prods--previa { grid-template-columns: repeat(2, 1fr); } .af-prod { border-radius: 24px; } .af-prod__body { padding: 14px; } .af-prod h3 { font-size: 1.1rem; } .af-prod p { font-size: .82rem; } .af-prod__pie { flex-direction: column; align-items: stretch; } .af-prod__add { justify-content: center; } .af-prod__emoji { font-size: 3.4rem; } .af-pills li { font-size: .78rem; padding: 6px 12px; } } @media (max-width: 380px) { .af-prods, .af-prods--previa { grid-template-columns: 1fr; } .af-rc { flex-basis: 100%; } } /* ===== Ajustes finos v1.4 ===== */ .af-sec *, .af-sec *::before, .af-sec *::after, .af-cintas * { box-sizing: border-box; } .af-cintas { height: 150px; margin-top: 0; } .af-cinta2--azul { background: linear-gradient(90deg, var(--af-azul-o), var(--af-azul-p)); } .af-rc__cta { white-space: nowrap; } .af-prod__img, .af-prod__img:hover { text-decoration: none !important; } .af-prods { display: flex; flex-wrap: wrap; justify-content: center; } .af-prod { flex: 0 0 calc((100% - 3 * var(--af-gap)) / 4); min-width: 0; } .af-prods--previa .af-prod { flex-basis: calc((100% - 4 * var(--af-gap)) / 5); } .af-vs__donas { justify-content: flex-start; } .af-vs__par { margin: auto 0; padding: 20px 0 10px; } .af-dona__aro { width: min(210px, 100%); } .af-vs__leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 18px; padding-top: 16px; border-top: 2px dashed var(--af-azul); font-size: .85rem; color: var(--af-gris); } .af-vs__leyenda span { display: inline-flex; align-items: center; gap: 6px; } .af-vs__leyenda i { width: 14px; height: 14px; border-radius: 4px; background: var(--af-naranja-2); } .af-vs__leyenda i.b { background: #ffc36b; } .af-vs__leyenda i.c { background: var(--af-azul); border: 1px solid var(--af-azul-2); } .af-env .af-resalta::after { background: var(--af-naranja); opacity: .45; bottom: -.04em; height: .12em; } @media (max-width: 1180px) { .af-prods--previa .af-prod { flex-basis: calc((100% - 2 * var(--af-gap)) / 3); } } @media (max-width: 1100px) { .af-prod { flex-basis: calc((100% - 2 * var(--af-gap)) / 3); } } @media (max-width: 960px) { .af-prod, .af-prods--previa .af-prod { flex-basis: calc((100% - var(--af-gap)) / 2); } } @media (max-width: 640px) { .af-cintas { height: 120px; } .af-prods { --af-gap: 12px; } } @media (max-width: 640px) { .af-vs__fila { grid-template-columns: auto 1fr; row-gap: 8px; } .af-vs__fila em { grid-column: 2; justify-self: start; } .af-vs__fila strong, .af-vs__fila small { white-space: nowrap; } } @media (max-width: 380px) { .af-prod, .af-prods--previa .af-prod { flex-basis: 100%; } } /* ===== v1.5: portada, banda divisora y nutrientes ===== */ /* Portada: composición del plato ordenada */ .af-hero { padding-bottom: clamp(110px, 11vw, 150px); } .af-hero__media { position: relative; width: 100%; max-width: 560px; margin-left: auto; aspect-ratio: 1; } .af-hero__blob { inset: 10%; } .af-slides { inset: 14%; } .af-ingflot { position: absolute; inset: 0; pointer-events: none; z-index: 4; } .af-ingflot span { font-size: .95rem; padding: 10px 18px; } .af-ingflot span:nth-child(1) { left: 0; top: 18%; right: auto; bottom: auto; } .af-ingflot span:nth-child(2) { right: 0; top: 40%; left: auto; bottom: auto; } .af-ingflot span:nth-child(3) { left: 2%; bottom: 20%; top: auto; right: auto; } .af-ingflot span:nth-child(4) { right: 6%; bottom: 6%; top: auto; left: auto; } .af-sticker { top: 4%; right: 8%; } [data-wiggle] { animation-name: af-rebota-t2; } @keyframes af-rebota-t2 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* Banda divisora única sobre la unión de secciones */ .af-cintas { display: none; } .af-banda { position: relative; height: 0; z-index: 6; overflow-x: clip; overflow-y: visible; } .af-banda__cinta { position: absolute; left: -4%; right: -4%; top: 0; transform: translateY(-50%) rotate(-1.6deg); background: var(--af-grano), linear-gradient(90deg, var(--af-naranja-2), var(--af-naranja), var(--af-naranja-2)); padding: 16px 0; overflow: hidden; border-top: 4px solid var(--af-oscuro); border-bottom: 4px solid var(--af-oscuro); box-shadow: 0 18px 30px -16px rgba(15, 35, 80, .55); } .af-banda__track { display: flex; align-items: center; gap: 26px; width: max-content; animation: af-marquee3 40s linear infinite; font-family: var(--af-f-titulo); font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: .02em; white-space: nowrap; color: #fff; -webkit-text-stroke: 6px var(--af-oscuro); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(15, 35, 80, .35); } .af-banda__track i { font-style: normal; font-size: .9em; -webkit-text-stroke: 0; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(15, 35, 80, .5)); animation: af-menea 1.6s ease-in-out infinite; display: inline-block; } @keyframes af-marquee3 { to { transform: translateX(-33.333%); } } /* Nutrientes: textos más grandes y legibles */ .af-nts { grid-template-columns: 1fr minmax(260px, 340px) 1fr; } .af-nts__col { gap: 16px; } .af-nt { padding: 18px 20px; gap: 16px; border-radius: 26px; } .af-nt__ico { width: 62px; height: 62px; font-size: 1.9rem; border-radius: 18px; } .af-nt h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); } .af-nt p { font-size: 1.05rem; margin: 4px 0 8px; } .af-nt small { font-size: .85rem; padding: 5px 12px; } .af-nts__aro span { width: 54px; height: 54px; margin: -27px; font-size: 1.6rem; } .af-nts__plato b { font-size: 2.6rem; } .af-nts__plato b small { font-size: .95rem; } @media (max-width: 1100px) { .af-nts { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .af-hero__media { margin: 0 auto; max-width: 400px; } .af-ingflot span { font-size: .8rem; padding: 8px 13px; } } @media (max-width: 640px) { .af-banda__cinta { padding: 12px 0; border-width: 3px; } .af-banda__track { font-size: 1.15rem; gap: 18px; -webkit-text-stroke-width: 5px; } .af-nts { grid-template-columns: 1fr; } .af-nts__centro { width: min(250px, 66%); } .af-nt { padding: 14px 16px; } .af-nt__ico { width: 54px; height: 54px; font-size: 1.6rem; } .af-nt h3 { font-size: 1.3rem; } .af-nt p { font-size: 1rem; } .af-ingflot span:nth-child(1) { top: 12%; } .af-ingflot span:nth-child(3) { bottom: 16%; } } /* ================= FOOTER / HEADER Blocksy ================= */ .ct-header a, .ct-footer a { transition: color .2s; } [data-id="logo"] .site-title { font-family: var(--af-f-titulo); } /* ================= RESPONSIVE ================= */ @media (max-width: 1024px) { .af-pasos, .af-elige { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } .af-cards3, .af-beneficios { grid-template-columns: 1fr 1fr; } .af-card--naranja, .af-card--naranja:hover { transform: none; } .af-card--naranja[data-reveal].is-in { animation-name: af-pop; } } @media (max-width: 860px) { .af-hero__grid, .af-split, .af-envios__grid, .af-contacto, .af-ing__panel.is-on { grid-template-columns: 1fr; } .af-hero { text-align: center; min-height: 0; } .af-hero .af-btns, .af-hero__sellos { justify-content: center; } .af-hero__media { max-width: 420px; margin: 0 auto; width: 100%; } .af-split__media { order: -1; } .af-circulo { max-width: 300px; } .af-tablas { grid-template-columns: 1fr; } .af-ing__info { text-align: center; } .af-checks li { text-align: left; } .af-envios__img { order: -1; } .af-envios__img img, .af-envios__img .af-ph { max-width: 240px; } .af-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .af-cards3, .af-beneficios, .af-elige { grid-template-columns: 1fr; } .af-pasos { grid-template-columns: 1fr 1fr; gap: 30px 14px; } .af-paso { padding: 26px 12px 18px; } .af-paso__img { width: 90px; height: 90px; } .af-paso__img .af-ph span { font-size: 2.6rem; } .af-form__row { grid-template-columns: 1fr; gap: 0; } .af-recetas { grid-template-columns: 1fr 1fr; gap: 14px; } .af-receta__body { padding: 14px; } .af-receta__body h3 { font-size: 1.15rem; } .af-receta__body p { font-size: .85rem; } .af-sticker { width: 84px; height: 84px; font-size: 1.5rem; } .af-btns .af-btn { flex: 1 1 100%; } .af-ing__tab { padding: 8px 12px; font-size: .85rem; } .af-wa-float { right: 14px; bottom: 14px; } .af-ingflot span { font-size: .75rem; padding: 7px 11px; } .af-ingflot span:nth-child(1) { left: 0; } .af-ingflot span:nth-child(2) { right: 0; } }