/* Portada v2 (31/10/2026, pedido de Matías): el orden de Chicken Frito (portada cortada con imágenes recortadas, promo,
   nosotros con el logo grande, lo que hacemos en tarjetas con imagen viva, banda con el celular, por qué elegirnos en barras
   y pedir ahora con imagen) pero con los colores del Estudio: tinta, papel y oro. Se suma a /home.css. */

.p2-chip { display: inline-flex; align-items: center; justify-self: start; padding: .42rem .9rem; border-radius: 999px; background: rgba(245, 243, 238, .1); box-shadow: inset 0 0 0 1px rgba(245, 243, 238, .22); color: var(--oro-claro); font: 700 .72rem var(--texto); letter-spacing: .16em; text-transform: uppercase; }
.p2-chip--oro { background: var(--oro); box-shadow: none; color: var(--tinta); }
.p2-chip--tinta { background: var(--tinta); box-shadow: none; color: var(--oro-claro); }
.p2-titulo { font: 800 clamp(3rem, 8.4vw, 7.2rem)/.9 var(--titulos); letter-spacing: -.035em; text-transform: uppercase; }
.p2-titulo span { color: var(--oro); }
.p2-titulo--medio { font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: .95; }
.p2-cabeza { display: grid; align-items: end; justify-items: start; gap: 1.2rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.p2-cabeza > .p2-chip { grid-column: 1 / -1; }
@media (min-width: 860px) { .p2-cabeza { grid-template-columns: 1fr auto; } }
.p2-cabeza--centro { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
.boton--claro { background: var(--papel); color: var(--tinta); }
.boton--claro:hover { background: #FFFFFF; }
.boton--linea-clara { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 1.5px rgba(245, 243, 238, .4); }
.boton--linea-clara:hover { background: rgba(245, 243, 238, .1); }
.p2-chispa { position: absolute; color: var(--oro); font-size: 1.6rem; animation: p2-titila 3s ease-in-out infinite; }
@keyframes p2-titila { 50% { opacity: .3; transform: scale(.7) rotate(20deg); } }

/* ---------- Portada ---------- */
.p2-hero { position: relative; display: grid; gap: 2.5rem; align-items: center; min-height: 100svh; padding: calc(var(--barra) + 3.5rem) var(--lado) 4rem; overflow: hidden; isolation: isolate; color: var(--papel);
  background: linear-gradient(112deg, var(--tinta) 0 54%, var(--oro) 54% 55.2%, #16263F 55.2% 100%); border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); }
.p2-hero::before { content: ""; position: absolute; z-index: -1; right: -10%; top: 10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(184, 155, 94, .28), transparent); }
.p2-hero__texto { display: grid; gap: 1.3rem; max-width: 640px; }
.p2-hero__bajada { max-width: 34em; font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(245, 243, 238, .8); }
.p2-botones { display: flex; flex-wrap: wrap; gap: .7rem; }
.p2-hero__sellos { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .88rem; font-weight: 600; color: var(--oro-claro); }
.p2-racimo { position: relative; height: clamp(360px, 48vw, 600px); }
.p2-racimo img { position: absolute; width: 58%; border-radius: 18px; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .7); animation: p2-flota 7s ease-in-out infinite; }
.p2-racimo__a { left: 0; top: 4%; transform: rotate(-8deg); }
.p2-racimo__b { right: 0; top: 0; transform: rotate(6deg); animation-delay: -2s !important; }
.p2-racimo__c { left: 6%; bottom: 6%; transform: rotate(5deg); animation-delay: -4s !important; }
.p2-racimo__d { right: 4%; bottom: 0; transform: rotate(-5deg); animation-delay: -1s !important; }
.p2-racimo__tel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; }
.p2-chispa--1 { left: 46%; top: 2%; } .p2-chispa--2 { right: 2%; top: 46%; animation-delay: -1s; } .p2-chispa--3 { left: 2%; top: 52%; animation-delay: -2s; }
@keyframes p2-flota { 50% { translate: 0 -10px; } }
@media (min-width: 960px) { .p2-hero { grid-template-columns: 1fr 1fr; } }

/* ---------- Celular y compu dibujados ---------- */
.p2-tel { position: relative; width: clamp(170px, 18vw, 230px); aspect-ratio: 9 / 18.5; padding: 7px; border-radius: 36px; background: #0A1220; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.p2-tel::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 13px; width: 30%; height: 15px; translate: -50% 0; border-radius: 99px; background: #0A1220; }
.p2-tel__pantalla { position: relative; height: 100%; border-radius: 29px; overflow: hidden; background: var(--papel); }
.p2-tel__web img { width: 100%; animation: p2-baja 16s ease-in-out infinite alternate; }
.p2-tel--grande { width: clamp(200px, 22vw, 270px); }
@keyframes p2-baja { 0%, 12% { transform: translateY(0); } 100% { transform: translateY(-62%); } }
.p2-nav { position: relative; border-radius: 16px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px var(--linea); }
.p2-nav__barra { position: relative; z-index: 2; display: flex; gap: 5px; padding: 9px 12px; background: var(--papel-2); }
.p2-nav__barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(15, 27, 45, .2); }
.p2-nav img { width: 100%; animation: p2-baja 18s ease-in-out infinite alternate; }

/* Chat que se va escribiendo */
.p2-chat { display: flex; flex-direction: column; gap: 7px; padding: 34px 10px 12px; background: #ECE5DA; }
.p2-chat__top { display: grid; margin: -34px -10px 4px; padding: 30px 12px 8px; background: #1F3B33; color: #fff; font-size: .78rem; line-height: 1.2; }
.p2-chat__top small { color: rgba(255, 255, 255, .7); font-size: .66rem; }
.p2-burbuja { max-width: 86%; padding: 7px 10px; border-radius: 12px; font-size: .74rem; line-height: 1.35; color: #1B1B1B; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .35s, transform .45s var(--resorte); }
.p2-burbuja--el { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 3px; }
.p2-burbuja--yo { align-self: flex-end; background: #D6F5C8; border-top-right-radius: 3px; }
.p2-burbuja.ve { opacity: 1; transform: none; }
html:not(.js) .p2-burbuja { opacity: 1; transform: none; }

/* ---------- Promo ---------- */
.p2-promo { padding: clamp(3.5rem, 8vw, 6rem) var(--lado) 0; }
.p2-promo__caja { position: relative; display: grid; gap: 2rem; align-items: center; padding: clamp(1.8rem, 5vw, 3.6rem); border-radius: clamp(26px, 3vw, 40px); overflow: hidden; color: var(--papel); background: linear-gradient(120deg, #16263F 0 62%, var(--tinta) 62%); }
.p2-promo__caja > div:first-child { display: grid; gap: 1.1rem; max-width: 560px; }
.p2-promo__caja p { color: rgba(245, 243, 238, .8); }
.p2-promo__caja .boton { justify-self: start; }
.p2-promo__sello { justify-self: center; display: grid; place-items: center; align-content: center; width: clamp(180px, 22vw, 260px); aspect-ratio: 1; border-radius: 50%; background: var(--oro); color: var(--tinta); text-align: center; transform: rotate(-10deg); box-shadow: 0 0 0 10px rgba(184, 155, 94, .18), 0 30px 60px -20px rgba(0, 0, 0, .6); animation: p2-gira 9s ease-in-out infinite; }
.p2-promo__sello b { font: 800 clamp(3.4rem, 6vw, 5rem)/.9 var(--titulos); letter-spacing: -.05em; }
.p2-promo__sello span { font: 700 .82rem/1.2 var(--texto); text-transform: uppercase; letter-spacing: .08em; }
@keyframes p2-gira { 50% { transform: rotate(4deg) scale(1.04); } }
@media (min-width: 860px) { .p2-promo__caja { grid-template-columns: 1.4fr 1fr; } }

/* ---------- Nosotros ---------- */
.p2-nosotros { display: grid; gap: 2.5rem; align-items: center; padding: clamp(4.5rem, 10vw, 8rem) var(--lado); }
.p2-nosotros > div:last-child { display: grid; gap: 1.2rem; }
.p2-nosotros__logo { position: relative; justify-self: center; display: grid; place-items: center; width: min(78vw, 420px); aspect-ratio: 1; border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 14px var(--papel-2), 0 0 0 15px rgba(184, 155, 94, .5), 0 50px 90px -40px rgba(15, 27, 45, .7); }
.p2-nosotros__logo img { width: 48%; }
.p2-chispa--4 { right: 6%; top: 8%; font-size: 2.4rem; }
.p2-texto { max-width: 36em; color: var(--tinta-2); font-size: 1.05rem; }
.p2-checks { display: grid; gap: .6rem; margin-top: .4rem; }
.p2-checks li { position: relative; padding-left: 2rem; font-weight: 700; }
.p2-checks li::before { content: "✓"; position: absolute; left: 0; top: -.05rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--oro); color: var(--tinta); font-size: .78rem; }
@media (min-width: 860px) { .p2-nosotros { grid-template-columns: 1fr 1.1fr; column-gap: clamp(3rem, 7vw, 7rem); } .p2-checks { grid-template-columns: 1fr 1fr; } }

/* ---------- Lo que hacemos ---------- */
.p2-servicios { padding: clamp(4.5rem, 10vw, 8rem) var(--lado); background: var(--papel-2); border-radius: clamp(28px, 4vw, 56px); margin: 0 clamp(0px, 1vw, 12px); }
.p2-cartas { display: grid; gap: 16px; }
@media (min-width: 680px) { .p2-cartas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .p2-cartas { grid-template-columns: repeat(4, 1fr); } }
.p2-carta { display: flex; flex-direction: column; gap: .7rem; padding: 14px 14px 18px; border-radius: 28px; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); transition: transform .5s var(--salida), box-shadow .5s var(--salida); }
.p2-carta:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(15, 27, 45, .5), 0 0 0 1px var(--linea); }
.p2-carta > :not(.p2-carta__img) { margin-inline: 6px; }
.p2-carta__img { position: relative; height: 230px; border-radius: 18px; overflow: hidden; }
.p2-carta__tipo { margin-top: .5rem; color: var(--oro-texto); font: 700 .72rem var(--texto); letter-spacing: .14em; text-transform: uppercase; }
.p2-carta h3 { font: 800 1.45rem/1.05 var(--titulos); letter-spacing: -.02em; text-transform: uppercase; }
.p2-carta p { color: var(--tinta-2); font-size: .94rem; }
.p2-carta__precio { margin-top: auto; padding-top: .3rem; }
.p2-carta__precio b { color: var(--tinta); font: 800 1.6rem var(--titulos); letter-spacing: -.03em; }
.p2-nota { margin-top: 1.4rem; color: var(--tinta-2); font-size: .95rem; }
.p2-chat--carta { height: 230px; }
.p2-chat--carta .p2-chat__top { margin-top: -34px; }
.p2-tienda { display: grid; align-content: start; gap: 8px; padding: 10px; background: var(--papel); }
.p2-tienda__grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p2-tienda__grilla span { display: grid; gap: 1px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--linea); font-size: .66rem; line-height: 1.2; }
.p2-tienda__grilla i { height: 46px; border-radius: 6px; background: center / cover var(--papel-2); }
.p2-tienda__grilla small { color: var(--gris); }
.p2-tienda__grilla em { justify-self: start; margin-top: 2px; padding: 2px 7px; border-radius: 99px; background: var(--tinta); color: var(--papel); font-style: normal; font-size: .6rem; }
.p2-tienda__grilla span:nth-child(1) em, .p2-tienda__grilla span:nth-child(3) em { background: var(--oro); color: var(--tinta); }
.p2-tienda__carrito { padding: 6px 10px; border-radius: 99px; background: #1F8A52; color: #fff !important; font-size: .7rem !important; font-weight: 700; text-align: center; }
.p2-flujo { background: #16263F; }
.p2-flujo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.p2-flujo__linea { fill: none; stroke: var(--oro); stroke-width: 2; stroke-dasharray: 6 7; animation: p2-corre 1.2s linear infinite; }
@keyframes p2-corre { to { stroke-dashoffset: -26; } }
.p2-nodo { position: absolute; padding: 7px 11px; border-radius: 12px; background: var(--papel); color: var(--tinta); font-size: .72rem; font-weight: 700; white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); animation: p2-late 3.6s ease-in-out infinite; }
.p2-nodo:nth-of-type(2) { animation-delay: .9s; } .p2-nodo:nth-of-type(3) { animation-delay: 1.8s; } .p2-nodo:nth-of-type(4) { animation-delay: 2.7s; }
.p2-nodo--oro { background: var(--oro); }
@keyframes p2-late { 0%, 70%, 100% { transform: none; } 20% { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 4px rgba(184, 155, 94, .45); } }

/* ---------- Banda con el celular ---------- */
.p2-banda { padding: clamp(4.5rem, 10vw, 7rem) var(--lado) 0; }
.p2-banda__caja { position: relative; display: grid; gap: 2rem; align-items: center; padding: clamp(2rem, 5vw, 3.5rem); border-radius: clamp(26px, 3vw, 40px); color: var(--papel); background: linear-gradient(115deg, var(--tinta) 0 50%, var(--oro) 50% 51.2%, #16263F 51.2%); overflow: hidden; }
.p2-banda__texto { display: grid; gap: 1.2rem; }
.p2-banda__texto p { max-width: 30em; color: rgba(245, 243, 238, .82); }
.p2-banda__texto .boton { justify-self: start; }
.p2-banda__tel { position: relative; justify-self: center; padding: 1rem 5.5rem; }
.p2-flota { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-radius: 14px; background: var(--papel); color: var(--tinta); font-size: .8rem; font-weight: 700; white-space: nowrap; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); animation: p2-flota 5s ease-in-out infinite; }
.p2-flota b { color: var(--oro-texto); }
.p2-flota--qr { left: 0; top: 12%; } .p2-flota--sellos { right: -6px; top: 28%; animation-delay: -1.5s; }
.p2-flota--turno { left: 6px; bottom: 26%; animation-delay: -3s; } .p2-flota--pedido { right: 0; bottom: 8%; animation-delay: -2s; background: #D6F5C8; }
@media (min-width: 860px) { .p2-banda__caja { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .p2-banda__tel { padding: 1rem 2.5rem; } .p2-flota { font-size: .7rem; padding: .45rem .7rem; } }

/* ---------- Por qué elegirnos ---------- */
.p2-porque { padding: clamp(4.5rem, 10vw, 8rem) var(--lado); }
.p2-porque__cuerpo { display: grid; gap: 2.5rem; align-items: center; }
.p2-barras { display: grid; gap: 12px; }
.p2-barras li { padding: 1.2rem 1.4rem; border-radius: 18px; background: var(--tinta); color: var(--papel); box-shadow: inset 6px 0 0 var(--oro); transition: transform .4s var(--salida); }
.p2-barras li:hover { transform: translateX(6px); }
.p2-barras h3 { font: 800 1.15rem var(--titulos); letter-spacing: -.01em; text-transform: uppercase; color: var(--oro-claro); }
.p2-barras p { margin-top: .25rem; color: rgba(245, 243, 238, .78); font-size: .94rem; }
.p2-porque__img { position: relative; padding: 0 0 3rem; }
.p2-porque__compu { height: clamp(260px, 30vw, 380px); box-shadow: 0 40px 80px -40px rgba(15, 27, 45, .6), 0 0 0 1px var(--linea); }
.p2-porque__tel { position: absolute; right: 4%; bottom: 0; width: clamp(130px, 13vw, 170px); }
@media (min-width: 900px) { .p2-porque__cuerpo { grid-template-columns: 1fr 1.1fr; } }

/* ---------- Pedir ahora ---------- */
.p2-pedir { display: grid; gap: 2.5rem; padding: clamp(4.5rem, 10vw, 8rem) var(--lado); background: var(--tinta); color: var(--papel); border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0; }
.p2-pedir__texto { display: grid; gap: 1.2rem; align-content: start; }
.p2-pedir__texto > p { max-width: 32em; color: rgba(245, 243, 238, .8); }
.p2-pedir__img { position: relative; justify-self: start; margin-top: 1rem; padding-right: 7rem; }
.p2-flota--quieta { right: 0; bottom: 18%; }
.p2-pedir .form { color: var(--tinta); }
@media (min-width: 900px) { .p2-pedir { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 7vw, 7rem); } }
@media (max-width: 899px) { .p2-pedir__img { display: none; } }

/* Rubros y preguntas reusadas: separación */
.p2-hero ~ .rubros, .p2-hero ~ .faq { border-radius: 0; }

/* Aparecen al llegar */
html.js .p2-sube { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--salida), transform 1s var(--salida); }
html.js .p2-sube.vista { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .p2-racimo img, .p2-flota, .p2-nodo, .p2-tel__web img, .p2-nav img, .p2-promo__sello, .p2-chispa { animation: none !important; } }

/* Arreglos después de mirar las capturas */
.p2-carta .p2-chat__top { color: #fff; font-size: .78rem; }
.p2-carta .p2-chat__top small { color: rgba(255, 255, 255, .7); }
.p2-flujo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 14px; }
.p2-flujo .p2-nodo { position: relative; }
.p2-flujo .p2-nodo + .p2-nodo::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 16px; border-left: 2px dashed var(--oro); animation: p2-baja-linea 1s linear infinite; }
@keyframes p2-baja-linea { 50% { opacity: .35; } }
@media (max-width: 959px) {
  .p2-hero { background: linear-gradient(168deg, var(--tinta) 0 63%, var(--oro) 63% 63.7%, #16263F 63.7% 100%); }
  .p2-banda__caja { background: linear-gradient(165deg, var(--tinta) 0 52%, var(--oro) 52% 52.8%, #16263F 52.8%); }
}

/* ===== Segunda vuelta tipo Chicken Frito (31/10/2026, pedido de Matías): botones que se llenan, portada con curva y webs nuestras
   que se mueven solas y con el mouse, aviso de promo al entrar, rubros en tarjetas que corren, webs que armamos, pie oscuro y WhatsApp redondo ===== */

/* Botones: al pasar el mouse se llenan de costado y la flecha se corre */
.boton { overflow: hidden; isolation: isolate; --barre: var(--oro); }
.boton::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--barre); transform: scaleX(0); transform-origin: right center; transition: transform .55s var(--salida); }
.boton:hover::before, .boton:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.boton:hover { transform: translateY(-2px); }
.boton:hover, .boton:focus-visible { color: var(--tinta); }
.boton i { display: inline-block; font-style: normal; transition: transform .4s var(--resorte); }
.boton:hover i { transform: translateX(5px); }
.boton--oro { --barre: var(--tinta); }
.boton--oro:hover, .boton--oro:focus-visible { color: var(--papel); }
.boton--claro { --barre: var(--oro); }
.boton--linea-clara { --barre: var(--papel); }

/* Portada: azul con una curva más clara a la derecha y filo dorado, como la de Chicken Frito */
.p2-hero { background: radial-gradient(ellipse 58% 96% at 100% 52%, #1E3658 0 99%, var(--oro) 99% 100%, transparent 100.3%), var(--tinta); }
@media (max-width: 959px) { .p2-hero { background: radial-gradient(ellipse 130% 50% at 50% 100%, #1E3658 0 99%, var(--oro) 99% 100%, transparent 100.3%), var(--tinta); } }
.p2-titulo--hero { font-size: clamp(3.4rem, 8vw, 7.2rem); }
.p2-borde { color: var(--oro) !important; -webkit-text-stroke: 2px #08101D; paint-order: stroke fill; text-shadow: 5px 5px 0 #08101D; }

/* Racimo: dos webs nuestras en compu, el celular con Planchazo y la comida recortada flotando */
.p2-racimo { height: clamp(400px, 46vw, 620px); }
.p2-racimo img { position: static; width: 100%; border-radius: 0; box-shadow: none; transform: none; animation: none; }
.p2-racimo > * { position: absolute; animation: p2-flota 6s ease-in-out infinite; }
.p2-racimo > :nth-child(2) { animation-delay: -1.5s; } .p2-racimo > :nth-child(3) { animation-delay: -3s; } .p2-racimo > :nth-child(4) { animation-delay: -.8s; }
.p2-racimo > :nth-child(5) { animation-delay: -2.2s; } .p2-racimo > :nth-child(6) { animation-delay: -4s; } .p2-racimo > :nth-child(7) { animation-delay: -1s; }
.p2-racimo .p2-nav { height: 46%; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .7); }
.p2-racimo .p2-nav img { animation: p2-baja 18s ease-in-out infinite alternate; }
.p2-racimo__a { left: 0; top: 4%; width: 64%; rotate: -6deg; }
.p2-racimo__b { right: 0; bottom: 5%; width: 60%; rotate: 5deg; }
.p2-racimo .p2-racimo__tel { left: 50%; top: 50%; translate: none; width: clamp(150px, 15vw, 210px); margin: calc(clamp(150px, 15vw, 210px) * -1.03) 0 0 calc(clamp(150px, 15vw, 210px) / -2); z-index: 3; rotate: 4deg; }
.p2-racimo .p2-tel__web img { animation: p2-baja 16s ease-in-out infinite alternate; }
.p2-racimo .p2-recorte { z-index: 4; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .55)); animation-name: p2-flota-gira; animation-duration: 7s; }
.p2-racimo .p2-recorte--burger { left: -3%; bottom: -2%; width: 36%; }
.p2-racimo .p2-recorte--papas { right: -3%; top: 0; width: 25%; }
.p2-racimo .p2-recorte--lata { left: 30%; top: -2%; width: 10%; z-index: 2; }
.p2-racimo .p2-flota { z-index: 5; }
.p2-flota--h1 { left: 2%; top: 52%; } .p2-flota--h2 { right: 4%; top: 42%; }
@keyframes p2-flota-gira { 50% { translate: 0 -14px; rotate: -4deg; } }
@media (max-width: 600px) { .p2-racimo { height: 380px; } .p2-racimo .p2-flota { font-size: .68rem; padding: .4rem .6rem; } .p2-flota--h1 { left: 0; top: 64%; } }

/* Aviso de promo al entrar */
.p2-aviso { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 1.2rem; background: rgba(8, 16, 29, .62); backdrop-filter: blur(6px); animation: p2-aparece .4s ease both; }
.p2-aviso[hidden] { display: none; }
.p2-aviso__caja { position: relative; display: grid; gap: 1rem; width: min(560px, 100%); padding: clamp(1.8rem, 5vw, 2.8rem); padding-top: clamp(3.4rem, 7vw, 3.6rem); border-radius: 32px; background: linear-gradient(125deg, #16263F 0 60%, var(--tinta) 60%); color: var(--papel); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(184, 155, 94, .35); animation: p2-entra .6s var(--resorte) both .1s; }
.p2-aviso__caja > p:not(.p2-chip):not(.p2-botones) { max-width: 26em; color: rgba(245, 243, 238, .82); }
.p2-aviso__caja p b { color: var(--oro-claro); }
.p2-aviso__cerrar { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(245, 243, 238, .1); color: var(--papel); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.p2-aviso__cerrar:hover { background: var(--papel); color: var(--tinta); }
.p2-aviso__sello { position: absolute; top: -34px; right: -14px; display: grid; place-items: center; align-content: center; width: 128px; aspect-ratio: 1; border-radius: 50%; background: var(--oro); color: var(--tinta); text-align: center; rotate: 10deg; box-shadow: 0 0 0 8px rgba(184, 155, 94, .2); animation: p2-gira 6s ease-in-out infinite; }
.p2-aviso__sello b { font: 800 2.3rem/.9 var(--titulos); letter-spacing: -.04em; }
.p2-aviso__sello span { font: 700 .66rem var(--texto); text-transform: uppercase; letter-spacing: .08em; }
.p2-aviso .p2-titulo--medio { font-size: clamp(2.2rem, 7vw, 3.4rem); }
@keyframes p2-aparece { from { opacity: 0; } }
@keyframes p2-entra { from { opacity: 0; transform: translateY(30px) scale(.92); } }
@media (max-width: 520px) { .p2-aviso__sello { width: 100px; top: -26px; right: -6px; } .p2-aviso__sello b { font-size: 1.8rem; } }

/* Logo grande de fondo detrás de los títulos centrados */
.p2-marca-agua { position: relative; isolation: isolate; }
.p2-marca-agua::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(560px, 86vw); aspect-ratio: 200 / 154; translate: -50% -50%; background: url(/img/monograma.svg) center / contain no-repeat; opacity: .06; }
.p2-cabeza--centro .p2-texto { margin-inline: auto; }

/* Lo que hacemos: productos de Planchazo en la tienda */
.p2-tienda__grilla img { height: 52px; width: 100%; object-fit: contain; }

/* Banda "Pedí por WhatsApp": ESTUDIO GONZÁLEZ de fondo y el celular saliendo de la caja */
.p2-banda { padding-top: clamp(7rem, 13vw, 10rem); }
.p2-banda__caja { overflow: visible; }
.p2-banda__fondo { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 3%; overflow: hidden; border-radius: inherit; font: 800 clamp(4rem, 10vw, 9.5rem)/.85 var(--titulos); letter-spacing: -.04em; text-align: right; text-transform: uppercase; color: rgba(245, 243, 238, .06); pointer-events: none; }
.p2-banda__tel, .p2-banda__texto { position: relative; z-index: 1; }
.p2-banda__tel { margin-top: clamp(-10rem, -11vw, -6rem); padding: 0 6rem 1rem; }
.p2-banda__tel .p2-tel { rotate: -6deg; }
.p2-banda .p2-recorte { position: absolute; z-index: 4; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .55)); animation: p2-flota-gira 7s ease-in-out infinite; }
.p2-banda .p2-recorte--b1 { right: -4%; bottom: 10%; width: 48%; animation-delay: -2s; }
.p2-banda .p2-recorte--b2 { left: -2%; bottom: -2%; width: 36%; }
.p2-banda .p2-recorte--b3 { right: 6%; top: 10%; width: 15%; animation-delay: -4s; }
.p2-banda .p2-flota--qr { left: 0; top: 22%; } .p2-banda .p2-flota--pedido { right: auto; left: 18%; bottom: -6%; }
@media (max-width: 520px) { .p2-banda__tel { padding: 0 3rem 1rem; } }

/* Rubros: tarjetas que corren solas (se frenan con el mouse encima) */
.p2-rubros { padding: clamp(4.5rem, 10vw, 8rem) 0; overflow: hidden; }
.p2-rubros .p2-cabeza { padding: 0 var(--lado); }
.p2-cinta { padding: 10px 0 14px; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.p2-cinta__pista { display: flex; gap: 16px; width: max-content; animation: p2-corre-cinta 80s linear infinite; }
.p2-cinta--vuelta .p2-cinta__pista { animation-direction: reverse; animation-duration: 90s; }
.p2-cinta:hover .p2-cinta__pista, .p2-cinta:focus-within .p2-cinta__pista { animation-play-state: paused; }
@keyframes p2-corre-cinta { to { transform: translateX(calc(-50% - 8px)); } }
.p2-rubro a { display: flex; flex-direction: column; width: clamp(230px, 21vw, 290px); height: 100%; padding: 18px 16px 16px; border-radius: 26px; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); color: var(--tinta); text-decoration: none; transition: transform .5s var(--salida), box-shadow .5s var(--salida); }
.p2-rubro b { min-height: 2.2em; font: 800 1.12rem/1.05 var(--titulos); letter-spacing: -.01em; text-transform: uppercase; }
.p2-rubro small { color: var(--gris); font-size: .78rem; }
.p2-rubro__img { display: block; margin: .8rem 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--papel-2); }
.p2-rubro__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .9s var(--salida); }
.p2-rubro__ver { display: flex; justify-content: center; gap: .4rem; margin-top: auto; padding: .7rem; border-radius: 999px; background: var(--oro); color: var(--tinta); font-weight: 700; font-size: .9rem; transition: background-color .3s, color .3s; }
.p2-rubro__ver i { font-style: normal; transition: transform .4s var(--resorte); }
.p2-rubro a:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 40px 60px -35px rgba(15, 27, 45, .55), 0 0 0 1px var(--linea); }
.p2-rubro a:hover img { transform: scale(1.07); }
.p2-rubro a:hover .p2-rubro__ver { background: var(--tinta); color: var(--papel); }
.p2-rubro a:hover .p2-rubro__ver i { transform: translateX(4px); }

/* Webs que armamos: al pasar el mouse la web baja entera */
.p2-nuestras { padding: clamp(4.5rem, 10vw, 8rem) var(--lado); background: var(--papel-2); border-radius: clamp(28px, 4vw, 56px); margin: 0 clamp(0px, 1vw, 12px) clamp(3rem, 6vw, 5rem); }
.p2-nuestras .p2-cabeza .p2-texto { grid-column: 1 / -1; }
.p2-obras { display: grid; gap: 22px; }
@media (min-width: 860px) { .p2-obras { grid-template-columns: repeat(3, 1fr); } }
.p2-obra { display: grid; gap: .3rem; color: var(--tinta); text-decoration: none; }
.p2-obra .p2-nav { display: block; height: clamp(280px, 27vw, 380px); margin-bottom: .7rem; box-shadow: 0 0 0 1px var(--linea), 0 30px 60px -40px rgba(15, 27, 45, .5); transition: transform .5s var(--salida), box-shadow .5s var(--salida); }
.p2-obra .p2-nav img { animation: none; transition: transform 7s cubic-bezier(.3, 0, .3, 1); }
.p2-obra:hover .p2-nav, .p2-obra:focus-visible .p2-nav { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--linea), 0 50px 80px -40px rgba(15, 27, 45, .6); }
.p2-obra:hover .p2-nav img, .p2-obra:focus-visible .p2-nav img { transform: translateY(calc(-100% + clamp(280px, 27vw, 380px) - 32px)); }
@media (hover: none) { .p2-obra .p2-nav img { animation: p2-baja 18s ease-in-out infinite alternate; } }
.p2-obra b { font: 800 1.5rem var(--titulos); letter-spacing: -.02em; text-transform: uppercase; }
.p2-obra small { color: var(--tinta-2); font-size: .92rem; }

/* Pie oscuro con columnas, como el de Chicken Frito */
.p2-pie { display: grid; gap: 2.4rem; padding: clamp(3.5rem, 8vw, 5.5rem) var(--lado) 2rem; background: #0A1220; color: rgba(245, 243, 238, .72); font-size: .95rem; }
@media (min-width: 860px) { .p2-pie { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; } }
.p2-pie__marca { display: grid; gap: .8rem; align-content: start; max-width: 30em; }
.p2-pie__nombre { font: italic 400 1.9rem/1 var(--letras); color: var(--papel); }
.p2-redes { display: flex; gap: .6rem; margin-top: .4rem; }
.p2-redes a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(245, 243, 238, .25); color: var(--papel); transition: background-color .3s, color .3s, transform .35s var(--resorte); }
.p2-redes a:hover { background: var(--oro); color: var(--tinta); transform: translateY(-3px); box-shadow: none; }
.p2-pie__col { display: grid; gap: .65rem; align-content: start; }
.p2-pie__col h3 { margin-bottom: .3rem; color: var(--oro-claro); font: 700 .75rem var(--texto); letter-spacing: .16em; text-transform: uppercase; }
.p2-pie__col a:not(.boton) { color: rgba(245, 243, 238, .8); text-decoration: none; transition: color .25s; }
.p2-pie__col a:not(.boton):hover { color: var(--oro-claro); }
.p2-pie__col .boton { justify-self: start; margin-top: .3rem; }
.p2-pie__chico { grid-column: 1 / -1; padding-top: 1.6rem; border-top: 1px solid rgba(245, 243, 238, .12); font-size: .82rem; }

/* WhatsApp redondo al costado, siempre a mano */
.p2-wa { position: fixed; z-index: 60; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .5); transition: transform .35s var(--resorte), opacity .4s; }
.p2-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: p2-pulso 2.4s infinite; }
.p2-wa:hover { transform: scale(1.1) rotate(-8deg); }
@keyframes p2-pulso { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } }
html.cargando .p2-wa { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .p2-racimo > *, .p2-recorte, .p2-cinta__pista, .p2-wa::after, .p2-aviso__sello { animation: none !important; }
  .p2-cinta { overflow-x: auto; }
}

/* Arreglos de la segunda vuelta */
.p2-racimo .p2-recorte { position: absolute; }
.p2-titulo--hero { font-size: clamp(3.2rem, 6.6vw, 6.2rem); }
.p2-cabeza--centro > .p2-chip { justify-self: center; }
.p2-banda__caja { background: linear-gradient(115deg, var(--tinta) 0 38%, var(--oro) 38% 39.2%, #16263F 39.2%); }
@media (max-width: 859px) { .p2-banda__caja { background: linear-gradient(165deg, var(--tinta) 0 52%, var(--oro) 52% 52.8%, #16263F 52.8%); } }
@media (max-width: 959px) { .p2-hero { background: radial-gradient(ellipse 140% 34% at 50% 100%, #1E3658 0 99%, var(--oro) 99% 100%, transparent 100.3%), var(--tinta); } }

/* ===== Tercera vuelta (01/11/2026, pedido de Matías): sin el logo grande en Nosotros, la tienda de zapatillas en la tarjeta,
   la banda de WhatsApp sin comida, más webs nuestras en todos lados, rubros que se mueven con el dedo y redes con sus colores ===== */

/* Nosotros: tres webs nuestras en abanico, cada una con lo que logra */
.p2-abanico { position: relative; justify-self: center; width: min(92vw, 520px); height: clamp(380px, 44vw, 520px); }
.p2-abanico::before { content: ""; position: absolute; left: 50%; top: 52%; width: 86%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(184, 155, 94, .35), rgba(184, 155, 94, .08) 70%, transparent); }
.p2-abanico__tel { position: absolute; left: 50%; top: 50%; width: clamp(150px, 15vw, 200px); translate: -50% -50%; transition: transform .7s var(--salida); }
.p2-abanico__tel--1 { transform: translateX(-62%) rotate(-12deg) scale(.88); }
.p2-abanico__tel--3 { transform: translateX(62%) rotate(12deg) scale(.88); }
.p2-abanico__tel--2 { z-index: 2; }
.p2-abanico:hover .p2-abanico__tel--1 { transform: translateX(-74%) rotate(-16deg) scale(.88); }
.p2-abanico:hover .p2-abanico__tel--3 { transform: translateX(74%) rotate(16deg) scale(.88); }
.p2-abanico__tel--1 .p2-tel__web img { animation-delay: -5s; } .p2-abanico__tel--3 .p2-tel__web img { animation-delay: -9s; }
.p2-abanico__f { z-index: 4; }
.p2-abanico__f--1 { left: 0; top: 14%; } .p2-abanico__f--2 { right: 0; top: 40%; animation-delay: -1.6s; } .p2-abanico__f--3 { left: 6%; bottom: 8%; animation-delay: -3.2s; background: #D6F5C8; }
.p2-abanico .p2-chispa--4 { right: 10%; top: 4%; z-index: 4; }
@media (max-width: 520px) { .p2-abanico { height: 400px; } .p2-abanico__tel { width: 150px; } .p2-abanico__f { font-size: .72rem; } }

/* Tienda online: Pisada bajando y subiendo, y el celu en la esquina */
.p2-pisada { display: block; color: inherit; text-decoration: none; }
.p2-pisada > img { animation-duration: 14s !important; }
.p2-pisada__tel { position: absolute; right: 10px; bottom: -34px; width: 86px !important; padding: 4px; border-radius: 18px; rotate: 6deg; z-index: 3; transition: translate .5s var(--salida); }
.p2-pisada__tel::before { top: 7px; height: 7px; }
.p2-pisada__tel .p2-tel__pantalla { border-radius: 14px; }
.p2-pisada__tel img { animation-duration: 11s !important; }
.p2-pisada__ver { position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: .4rem .75rem; border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: .74rem; font-weight: 700; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); transition: background-color .3s, color .3s; }
.p2-pisada:hover .p2-pisada__ver { background: var(--oro); color: var(--tinta); }
.p2-pisada:hover .p2-pisada__tel { translate: 0 -10px; }

/* Automatización: cuando esté el video, tapa los cartelitos */
.p2-flujo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.p2-flujo.con-video .p2-flujo__video { opacity: 1; }
.p2-flujo.con-video .p2-nodo { display: none; }

/* Banda "Pedí por WhatsApp": el celu con la charla con el Estudio y dos webs nuestras detrás */
.p2-chat--tel { height: 100%; padding-top: 52px; justify-content: flex-start; gap: 8px; }
.p2-chat--tel .p2-chat__top { margin: -52px -10px 6px; padding: 40px 14px 10px; background: var(--tinta); }
.p2-chat--tel .p2-chat__top small { color: var(--oro-claro); }
.p2-chat--tel .p2-burbuja { font-size: .72rem; }
.p2-burbuja--web { display: grid; gap: 4px; padding: 5px 5px 8px; }
.p2-burbuja--web img { width: 100%; height: 64px; object-fit: cover; object-position: top; border-radius: 8px; }
.p2-burbuja--web b { display: block; padding: 0 4px; font-size: .74rem; }
.p2-banda__web { position: absolute; width: 62%; height: 46%; z-index: 0; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .7); animation: p2-flota 7s ease-in-out infinite; }
.p2-banda__web img { animation: p2-baja 14s ease-in-out infinite alternate; }
.p2-banda__web--1 { left: -10%; top: 6%; rotate: -8deg; }
.p2-banda__web--2 { right: -12%; bottom: 4%; rotate: 7deg; animation-delay: -3s; }
.p2-banda__tel .p2-tel { z-index: 2; }
.p2-obj { position: absolute; z-index: 4; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .55)); animation: p2-flota-gira 7s ease-in-out infinite; }
.p2-obj--1 { right: -6%; bottom: 14%; width: 30%; animation-delay: -2s; }
.p2-obj--2 { left: -4%; bottom: 0; width: 26%; }
.p2-obj--3 { right: 2%; top: 6%; width: 22%; animation-delay: -4s; }
.p2-banda .p2-flota--qr { left: 0; top: 30%; } .p2-banda .p2-flota--pedido { left: auto; right: 0; bottom: 18%; }

/* Por qué elegirnos: varias webs que se van pasando */
.p2-rota { position: relative; display: block; }
.p2-rota img { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .9s ease; }
.p2-rota img.activa { position: relative; opacity: 1; }
.p2-porque__compu .p2-rota img { animation: p2-baja 16s ease-in-out infinite alternate; }
.p2-porque__nombre { left: 2%; bottom: 6%; z-index: 4; }
.p2-porque__nombre span { transition: opacity .3s; }

/* Webs que armamos: todas, con filtro por rubro */
.p2-filtro { display: flex; gap: .5rem; overflow-x: auto; margin: 0 calc(var(--lado) * -1) 1.8rem; padding: .2rem var(--lado); scrollbar-width: none; }
.p2-filtro::-webkit-scrollbar { display: none; }
.p2-filtro button { flex: none; min-height: 44px; padding: .45rem 1.1rem; border: 0; border-radius: 999px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); color: var(--tinta); font: 700 .9rem var(--texto); cursor: pointer; transition: background-color .25s, color .25s; }
.p2-filtro button:hover { background: var(--papel); }
.p2-filtro button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); box-shadow: none; }
.p2-obras { --alto-obra: clamp(250px, 19vw, 300px); }
@media (min-width: 860px) { .p2-obras { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .p2-obras { grid-template-columns: repeat(4, 1fr); } }
.p2-obra .p2-nav { height: var(--alto-obra); }
.p2-obra:hover .p2-nav img, .p2-obra:focus-visible .p2-nav img { transform: translateY(calc(-100% + var(--alto-obra) - 32px)); }
.p2-obra.oculta { display: none; }
.p2-obra { animation: p2-aparece .5s ease both; }
.p2-obra__hueco { display: grid; align-content: center; justify-items: start; gap: .7rem; height: var(--alto-obra); margin-bottom: .7rem; padding: 1.6rem; border-radius: 16px; border: 2px dashed rgba(184, 155, 94, .7); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(184, 155, 94, .07) 14px 28px); }
.p2-obra__hueco b { font: 800 clamp(1.8rem, 2.4vw, 2.2rem)/1 var(--titulos) !important; text-transform: uppercase; letter-spacing: -.02em; }
.p2-obra__hueco small { font-size: .95rem !important; }
.p2-obra__hueco em { margin-top: .4rem; padding: .6rem 1.1rem; border-radius: 999px; background: var(--oro); font-style: normal; font-weight: 700; transition: background-color .3s, color .3s; }
.p2-obra--tuya:hover em { background: var(--tinta); color: var(--papel); }
/* En el celu: se pasan con el dedo, de costado */
@media (max-width: 859px) {
  .p2-obras { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; margin: 0 calc(var(--lado) * -1); padding: 0 var(--lado) 1rem; scroll-snap-type: x mandatory; scroll-padding: 0 var(--lado); scrollbar-width: none; --alto-obra: 380px; }
  .p2-obras::-webkit-scrollbar { display: none; }
  .p2-obra { scroll-snap-align: start; }
}
.p2-obras__pista { display: none; }
@media (max-width: 859px) { .p2-obras__pista { display: block; margin-top: .4rem; color: var(--tinta-2); font-size: .85rem; } }

/* Preguntas: otra web nuestra al lado */
.p2-faq__img { position: relative; margin-top: 2.4rem; padding-bottom: 2.6rem; }
.p2-faq__compu { height: 300px; box-shadow: 0 40px 80px -40px rgba(15, 27, 45, .55), 0 0 0 1px var(--linea); }
.p2-faq__tel { position: absolute; right: 6%; bottom: 0; width: 130px; }
.p2-faq__tel .p2-tel__web img { animation-delay: -6s; }
@media (max-width: 899px) { .p2-faq__img { display: none; } }

/* Rubros: con JS corren solos pero se pueden mover con el dedo o arrastrando */
.p2-cinta.js-mano { overflow-x: auto; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.p2-cinta.js-mano::-webkit-scrollbar { display: none; }
.p2-cinta.js-mano .p2-cinta__pista { animation: none; }
.p2-cinta.arrastrando { cursor: grabbing; }
.p2-cinta.arrastrando a { pointer-events: none; }
.p2-rubros__pista { margin-top: .6rem; color: var(--tinta-2); font-size: .85rem; text-align: center; }

/* Pie: Instagram, TikTok y WhatsApp con sus colores de siempre */
.p2-redes a { width: 46px; height: 46px; box-shadow: none; }
.p2-red--ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); color: #fff !important; }
.p2-red--tt { background: #000; }
.p2-red--wa { background: #25D366; color: #fff !important; }
.p2-redes a:hover { background-color: inherit; transform: translateY(-3px) scale(1.06); }
.p2-redes .p2-red--ig:hover { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.p2-redes .p2-red--tt:hover { background: #000; }
.p2-redes .p2-red--wa:hover { background: #25D366; }

@media (prefers-reduced-motion: reduce) { .p2-banda__web, .p2-obj, .p2-rota img, .p2-abanico__tel { animation: none !important; transition: none !important; } }
/* Arreglos de la tercera vuelta, después de mirar las capturas */
.p2-pisada__tel, .p2-pisada__tel .p2-tel__pantalla { display: block; }
.p2-obra { align-content: start; }
/* Por qué elegirnos: ícono 3D al costado de cada motivo (aparece solo cuando se sube ic-*.webp a /v2/img) */
.p2-barras li { position: relative; }
.p2-barras li:has(.p2-barras__icono) { padding-right: 5.6rem; }
.p2-barras__icono { position: absolute; right: .9rem; top: 50%; width: 64px; height: 64px; translate: 0 -50%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); transition: transform .5s var(--resorte); }
.p2-barras li:hover .p2-barras__icono { transform: rotate(-8deg) scale(1.08); }
.p2-obj--1 { right: -9%; bottom: 34%; width: 26%; }
.p2-banda .p2-flota--pedido { right: 2%; bottom: 4%; }

/* ===== Sin comida (01/11/2026, pedido de Matías: parecía que vendíamos hamburguesas) ===== */
/* Portada: bolsa, calendario y chat del Estudio en lugar de la hamburguesa, las papas y la lata */
.p2-racimo .p2-recorte--burger { left: -4%; bottom: -1%; width: 27%; }
.p2-racimo .p2-recorte--papas { right: -2%; top: 1%; width: 21%; }
.p2-racimo .p2-recorte--lata { left: 28%; top: -4%; width: 15%; }
.p2-obj { width: 22%; }

/* Tienda: al pasar el mouse o tocarla, baja entera */
.p2-pisada { cursor: pointer; }
.p2-pisada > img { transition: transform 6s cubic-bezier(.3, 0, .3, 1); }
.p2-pisada:hover > img, .p2-pisada.bajando > img { animation: none !important; transform: translateY(calc(-100% + 230px - 32px)); }
.p2-pisada__toca { position: absolute; right: 108px; bottom: 10px; z-index: 3; padding: .4rem .7rem; border-radius: 999px; background: var(--oro); color: var(--tinta); font-size: .72rem; font-weight: 700; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); animation: p2-late 2.4s ease-in-out infinite; }
.p2-pisada.bajando .p2-pisada__toca, .p2-pisada:hover .p2-pisada__toca { opacity: 0; transition: opacity .3s; }

/* Automatización: una lista de automatizaciones que se van prendiendo solas */
.p2-autos { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 14px; }
.p2-autos__top { display: grid; margin-bottom: 2px; color: var(--papel); font-size: .8rem; line-height: 1.2; }
.p2-autos__top small { color: var(--oro-claro); font-size: .66rem; }
.p2-auto { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 12px; background: rgba(245, 243, 238, .08); box-shadow: inset 0 0 0 1px rgba(245, 243, 238, .12); color: var(--papel); font-size: .7rem; animation: p2-auto-fila 8s infinite; }
.p2-auto i { font-style: normal; }
.p2-auto b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p2-auto em { position: relative; padding: 2px 8px 2px 22px; border-radius: 99px; background: rgba(245, 243, 238, .12); color: rgba(245, 243, 238, .5); font-style: normal; font-size: .62rem; font-weight: 700; animation: p2-auto-ok 8s infinite; padding: 2px 22px 2px 8px; }
.p2-auto em::before { content: ""; position: absolute; right: 3px; top: 50%; width: 14px; height: 14px; translate: 0 -50%; border-radius: 50%; background: rgba(245, 243, 238, .55); animation: p2-auto-bola 8s infinite; }
.p2-auto:nth-of-type(2), .p2-auto:nth-of-type(2) em, .p2-auto:nth-of-type(2) em::before { animation-delay: 1.2s; }
.p2-auto:nth-of-type(3), .p2-auto:nth-of-type(3) em, .p2-auto:nth-of-type(3) em::before { animation-delay: 2.4s; }
.p2-auto:nth-of-type(4), .p2-auto:nth-of-type(4) em, .p2-auto:nth-of-type(4) em::before { animation-delay: 3.6s; }
@keyframes p2-auto-ok { 0%, 8% { background: rgba(245, 243, 238, .12); color: rgba(245, 243, 238, .5); } 14%, 85% { background: var(--oro); color: var(--tinta); } 100% { background: rgba(245, 243, 238, .12); color: rgba(245, 243, 238, .5); } }
@keyframes p2-auto-fila { 0%, 8% { transform: none; } 11% { transform: scale(1.04); box-shadow: inset 0 0 0 1px var(--oro), 0 0 0 4px rgba(184, 155, 94, .25); } 16%, 100% { transform: none; } }
@keyframes p2-auto-bola { 0%, 8% { right: calc(100% - 17px); background: rgba(245, 243, 238, .55); } 14%, 85% { right: 3px; background: var(--tinta); } 100% { right: calc(100% - 17px); background: rgba(245, 243, 238, .55); } }
.p2-flujo.con-video .p2-auto, .p2-flujo.con-video .p2-autos__top { display: none; }
@media (prefers-reduced-motion: reduce) { .p2-auto, .p2-auto em, .p2-auto em::before, .p2-pisada__toca { animation: none !important; } }
.p2-pisada__toca { right: auto; left: auto; top: 40px; bottom: auto; right: 10px; }
.p2-autos { justify-content: flex-start; gap: 7px; padding-top: 16px; }
.p2-carta .p2-autos__top, .p2-carta .p2-autos__top b { color: var(--papel); } .p2-carta .p2-autos__top small { color: var(--oro-claro); }

/* Pregunta "¿Por qué debería tener una web?" con la fuente de los datos */
.faq__fuente { display: block; margin-top: .7rem; color: var(--gris); font-size: .8rem; }
.faq__fuente a { color: inherit; text-decoration: underline; }