/* =========================================================
   Reparto de Agua — hero con video, sección de la app y parallax
   (estilo tomado de wabbi.ar: hero de color de marca, video en tarjeta,
   botón de sonido que abre el video en grande)
   ========================================================= */

/* ---------- Nav transparente sobre el hero azul ---------- */
.brand .logo-blanco { display: none; }
@media (min-width: 921px) {
  .con-hero-azul .nav:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .con-hero-azul .nav:not(.scrolled) .logo-color { display: none; }
  .con-hero-azul .nav:not(.scrolled) .logo-blanco { display: block; }
  .con-hero-azul .nav:not(.scrolled) .nav-links a,
  .con-hero-azul .nav:not(.scrolled) .nav-login { color: rgb(255 255 255 / .86); }
  .con-hero-azul .nav:not(.scrolled) .nav-links a:hover,
  .con-hero-azul .nav:not(.scrolled) .nav-login:hover { color: #fff; }
  .con-hero-azul .nav:not(.scrolled) .btn-primary { background: #fff; color: var(--azul-700); box-shadow: 0 8px 24px rgb(8 29 51 / .25); }
  .con-hero-azul .nav:not(.scrolled) .btn-primary:hover { background: var(--cian-50); }
}
@media (max-width: 920px) {
  /* en celular la barra queda azul translúcida hasta que se scrollea o se abre el menú */
  .con-hero-azul .nav:not(.scrolled):not(:has(.nav-links.open)) { background: rgb(17 76 130 / .55); }
  .con-hero-azul .nav:not(.scrolled):not(:has(.nav-links.open)) .logo-color { display: none; }
  .con-hero-azul .nav:not(.scrolled):not(:has(.nav-links.open)) .logo-blanco { display: block; }
  .con-hero-azul .nav:not(.scrolled):not(:has(.nav-links.open)) .nav-toggle { background: transparent; border-color: rgb(255 255 255 / .4); }
  .con-hero-azul .nav:not(.scrolled):not(:has(.nav-links.open)) .nav-toggle span { background: #fff; }
}

/* ---------- Hero azul ---------- */
.hero-azul {
  color: #fff; isolation: isolate;
  padding: calc(96px + 64px) 0 120px;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(80% 70% at 88% 0%, rgb(32 185 229 / .75) 0%, transparent 62%),
    radial-gradient(70% 70% at 0% 100%, var(--azul-900) 0%, transparent 65%),
    var(--azul-600);
}
.hero-azul .hero-bg {
  inset: -10% 0 -10% 0; z-index: -1; opacity: 1;
  background:
    linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 60% 30%, #000 35%, transparent 90%);
          mask-image: radial-gradient(ellipse 100% 90% at 60% 30%, #000 35%, transparent 90%);
}
.hero-azul .hero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-blob { position: absolute; z-index: -1; width: 640px; height: 640px; right: -200px; bottom: -330px; border-radius: 50%; background: rgb(255 255 255 / .07); pointer-events: none; }
/* curva que entra a la sección siguiente, como en wabbi.ar */
.hero-azul::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -1px; height: 64px; background: var(--bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: 0; }

.hero-azul .hero-grid { grid-template-columns: 1fr 1.08fr; gap: 56px; position: relative; z-index: 1; }
.hero-eyebrow { color: var(--cian-100); margin-bottom: 18px; }
.hero-azul h1 { color: #fff; font-size: clamp(38px, 4.6vw, 64px); }
.hero-azul .hl { color: var(--cian-200); position: relative; display: inline-block; }
.hero-azul .hl svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .32em; overflow: visible; }
.hero-azul .hl path { fill: none; stroke: var(--cian-300); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: subrayar 1s .6s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes subrayar { to { stroke-dashoffset: 0; } }
.hero-azul .lead { color: rgb(255 255 255 / .88); }
.hero-azul .hero-checks { color: rgb(255 255 255 / .9); }
.hero-azul .hero-checks li::before { background: rgb(255 255 255 / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.hero-azul .trust { border-top-color: rgb(255 255 255 / .18); position: relative; z-index: 1; }
.hero-azul .trust li { color: rgb(255 255 255 / .86); }
.hero-azul .trust .ic { color: var(--cian-200); }
.btn-blanco { background: #fff; color: var(--azul-700); box-shadow: 0 12px 30px rgb(8 29 51 / .28); }
.btn-blanco:hover { background: var(--cian-50); }
.btn-blanco .ic { color: #1FA855; }

/* entrada del hero */
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: subir .7s cubic-bezier(.16,1,.3,1) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
.hero-media .video-card { animation: subir .9s cubic-bezier(.16,1,.3,1) .2s both; }

/* ---------- Tarjeta de video ---------- */
.hero-media { position: relative; }
.hero-media::before { content: ""; position: absolute; top: -20px; right: -20px; width: 128px; height: 128px; border-radius: 24px; background-image: radial-gradient(rgb(255 255 255 / .5) 1.5px, transparent 1.5px); background-size: 12px 12px; z-index: -1; }
.video-card { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--papel); box-shadow: 0 40px 80px rgb(8 29 51 / .45), 0 0 0 6px rgb(255 255 255 / .16); }
.video-card picture, .video-card img, .video-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card video { opacity: 0; transition: opacity .5s ease; }
.video-card.reproduciendo video { opacity: 1; }

/* Subtítulos grandes: tapan los del video (que en la tarjeta quedan chicos) */
.video-subs {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%);
  margin: 0; padding: .32em .85em; border-radius: 999px; white-space: nowrap;
  background: #fff; color: var(--gris-400); box-shadow: 0 4px 16px rgb(10 22 40 / .12), 0 0 0 1px rgb(10 22 40 / .05);
  font: 600 clamp(12px, 1.12vw, 16px)/1.35 var(--font-body); letter-spacing: -.005em;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.video-subs.ver { opacity: 1; }
.video-subs .dicha { color: var(--tinta); }
.video-subs .ahora { color: var(--azul-600); }

/* Botón "Ver con sonido": toda la tarjeta es clickeable, la pastilla va arriba a la izquierda */
.video-sound { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-start; padding: 14px; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--tinta); }
.video-sound::after { content: ""; position: absolute; inset: 0; background: rgb(8 29 51 / 0); transition: background .2s; }
.video-sound:hover::after { background: rgb(8 29 51 / .06); }
.vs-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; }
.vs-pill i { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--azul-600); color: #fff; box-shadow: 0 8px 20px rgb(19 93 158 / .35); flex: none; z-index: 1; }
.vs-pill i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--azul-600); animation: latido 2.2s ease-out infinite; }
@keyframes latido { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
.vs-pill svg { width: 22px; height: 22px; }
.vs-pill b { margin-left: -18px; padding: 10px 14px 10px 28px; border-radius: 0 999px 999px 0; background: #fff; font: 600 14px/1 var(--font-body); color: var(--tinta); box-shadow: 0 6px 18px rgb(10 22 40 / .14); transition: transform .2s; transform-origin: left center; }
.vs-pill em { margin-left: 8px; font: normal 500 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--gris-600); background: rgb(255 255 255 / .85); padding: 6px 8px; border-radius: 999px; }
.video-sound:hover .vs-pill b { transform: scale(1.04); }
.video-sound:focus-visible { outline: 3px solid var(--cian-300); outline-offset: -3px; border-radius: 20px; }
.video-note { margin-top: 14px; text-align: center; font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .75); }

/* ---------- Modal con sonido ---------- */
.vmodal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgb(8 29 51 / .84); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: aparecer .25s ease both; }
.vmodal[hidden] { display: none; }
@keyframes aparecer { from { opacity: 0; } }
.vmodal-box { position: relative; width: min(1280px, 100%, calc((100vh - 120px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 16px; overflow: visible; background: #000; box-shadow: 0 40px 100px rgb(0 0 0 / .5); }
.vmodal-box video { width: 100%; height: 100%; border-radius: 16px; display: block; background: #000; }
.vmodal-close { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .1); color: #fff; cursor: pointer; display: grid; place-items: center; }
.vmodal-close:hover { background: rgb(255 255 255 / .2); }
.vmodal-close svg { width: 20px; height: 20px; }

/* ---------- Sección "En la calle": la app del repartidor ---------- */
.calle { position: relative; overflow: hidden; padding-top: 72px; }
.calle-deco { position: absolute; z-index: -1; width: 900px; height: 900px; left: -320px; top: -80px; border-radius: 50%; background: radial-gradient(circle, rgb(32 185 229 / .16), transparent 62%); pointer-events: none; }
.calle-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.calle-visual { position: relative; height: 720px; }
.calle-ring { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; border: 1px dashed rgb(19 93 158 / .22); background: radial-gradient(circle, rgb(32 185 229 / .1), transparent 66%); }
.calle-ring::before { content: ""; position: absolute; inset: 70px; border-radius: 50%; border: 1px solid rgb(19 93 158 / .1); }

/* celular: pantalla con la grabación real de la app (480×752) + barra de estado */
.celu { position: absolute; left: 50%; top: 50%; width: 300px; margin-left: -150px; transform: translateY(-50%); padding: 10px; border-radius: 46px; background: var(--tinta); box-shadow: 0 50px 90px -24px rgb(10 22 40 / .45), 0 0 0 1px rgb(10 22 40 / .12), inset 0 0 0 2px #24344d; }
.celu-isla { position: absolute; top: 18px; left: 50%; width: 78px; height: 22px; margin-left: -39px; border-radius: 20px; background: #000; z-index: 2; }
.celu-pantalla { position: relative; border-radius: 36px; overflow: hidden; background: #1B5189; padding-top: 38px; }
.celu-pantalla video { display: block; width: 100%; aspect-ratio: 480 / 968; object-fit: cover; background: #e8eef3; }
.celu-pantalla::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 96px; height: 4px; margin-left: -48px; border-radius: 4px; background: rgb(10 22 40 / .35); }

.calle-chip { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 24px 48px -16px rgb(10 22 40 / .2); max-width: 250px; z-index: 3; }
.calle-chip .ic { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--azul-50); color: var(--azul-600); }
.calle-chip b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.calle-chip small { display: block; font-size: 12px; color: var(--fg-muted); line-height: 1.35; }
.chip-a { left: -4px; top: 96px; }
.chip-b { right: -12px; top: 300px; }
.chip-b .ic { background: var(--exito-50); color: var(--exito-700); }
.chip-c { left: 18px; bottom: 70px; }

.calle-copy h2 { margin: 16px 0 18px; }
.calle-copy .lead { margin-bottom: 28px; }
.calle-checks { margin-bottom: 28px; }
.calle-checks li::before { background-color: var(--cian-50); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230C80A6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.calle-nota { margin-top: 18px; font-size: 12.5px; color: var(--fg-muted); }

/* ---------- Parallax ---------- */
[data-parallax] { will-change: translate; }
.celu { rotate: var(--giro, 0deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-azul { min-height: 0; }
  .hero-azul .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-media { max-width: 720px; width: 100%; margin: 0 auto; }
  .calle-grid { grid-template-columns: 1fr; gap: 40px; }
  .calle-visual { max-width: 560px; width: 100%; margin: 0 auto; order: 2; }
}
@media (max-width: 600px) {
  .hero-azul { padding: calc(96px + 28px) 0 88px; }
  .hero-azul::after { height: 36px; }
  .hero-media::before { display: none; }
  .video-card { border-radius: 14px; box-shadow: 0 24px 50px rgb(8 29 51 / .45), 0 0 0 4px rgb(255 255 255 / .16); }
  .video-sound { padding: 10px; }
  .vs-pill i { width: 36px; height: 36px; }
  .vs-pill svg { width: 19px; height: 19px; }
  .vs-pill b { font-size: 13px; padding: 8px 12px 8px 26px; }
  .vs-pill em { display: none; }
  .video-subs { font-size: 11.5px; bottom: 2.5%; }
  .vmodal { padding: 12px; }
  .vmodal-box { border-radius: 10px; }
  .vmodal-box video { border-radius: 10px; }
  .calle { padding-top: 40px; }
  .calle-visual { height: 600px; }
  .celu { width: 250px; margin-left: -125px; border-radius: 40px; padding: 8px; }
  .celu-pantalla { border-radius: 32px; padding-top: 32px; }
  .calle-ring { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
  .calle-chip { padding: 9px 12px 9px 9px; max-width: 190px; gap: 9px; }
  .calle-chip .ic { width: 30px; height: 30px; padding: 6px; }
  .calle-chip b { font-size: 12.5px; }
  .calle-chip small { font-size: 11px; }
  .chip-a { left: 0; top: 0; }
  .celu { rotate: calc(var(--giro, 0deg) * .5); }
  .chip-b { right: 0; top: 250px; }
  .chip-c { left: 0; bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { translate: none !important; }
  .hero-azul .hl path { stroke-dashoffset: 0; }
}

.nav-links a { white-space: nowrap; }
@media (min-width: 921px) {
  .nav-inner { gap: 24px; }
  .nav-links { gap: 4px; }
  /* sección activa: pastilla de fondo que sigue al scroll */
  .nav-links a { padding: 7px 12px; border-radius: 999px; transition: background .25s, color .25s; }
  .nav-links a.activo { background: var(--azul-100); color: var(--azul-700); font-weight: 600; box-shadow: inset 0 0 0 1px rgb(19 93 158 / .12); }
  .nav-links a.activo:hover { color: var(--azul-700); }
  .con-hero-azul .nav:not(.scrolled) .nav-links a.activo { background: rgb(255 255 255 / .16); color: #fff; }
}
@media (min-width: 921px) and (max-width: 1180px) { .nav-links { gap: 0; } .nav-links a { font-size: 13.5px; padding: 6px 9px; } .nav-login { display: none; } }
@media (max-width: 600px) { .hero-azul .hero-bg canvas { opacity: .5; } }

/* ---------- Variante: hero con fondo claro (body.hero-claro) ---------- */
.hero-claro .hero-azul {
  color: var(--fg);
  background:
    radial-gradient(60% 60% at 85% 10%, rgb(32 185 229 / .16), transparent 70%),
    radial-gradient(55% 55% at 70% 95%, rgb(19 93 158 / .09), transparent 70%),
    var(--papel);
}
.hero-claro .hero-azul .hero-bg {
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 56px 56px;
}
.hero-claro .hero-blob { background: rgb(32 185 229 / .07); }
.hero-claro .hero-azul::after { display: none; }
.hero-claro .hero-eyebrow { color: var(--azul-600); }
.hero-claro .hero-azul h1 { color: var(--tinta); }
.hero-claro .hero-azul .hl { color: var(--azul-600); }
.hero-claro .hero-azul .hl path { stroke: var(--cian-400); }
.hero-claro .hero-azul .lead { color: var(--gris-600); }
.hero-claro .hero-azul .hero-checks { color: var(--gris-600); }
.hero-claro .hero-azul .hero-checks li::before { background: var(--cian-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230C80A6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.hero-claro .btn-blanco { background: var(--azul-600); color: #fff; box-shadow: 0 12px 28px rgb(19 93 158 / .28); }
.hero-claro .btn-blanco:hover { background: var(--azul-700); }
.hero-claro .btn-blanco .ic { color: #fff; }
.hero-claro .hero-azul .btn-ghost-light { background: var(--surface); color: var(--fg); border-color: var(--line-strong); }
.hero-claro .hero-azul .btn-ghost-light:hover { border-color: var(--fg); }
.hero-claro .hero-media::before { background-image: radial-gradient(rgb(19 93 158 / .35) 1.5px, transparent 1.5px); }
.hero-claro .video-card { box-shadow: 0 40px 80px -24px rgb(10 22 40 / .35), 0 0 0 1px rgb(19 93 158 / .18), 0 0 0 7px #fff, 0 0 0 8px rgb(19 93 158 / .1); }
.hero-claro .video-note { color: var(--gris-500); }
.hero-claro .hero-azul .trust { border-top-color: var(--line); }
.hero-claro .hero-azul .trust li { color: var(--gris-600); }
.hero-claro .hero-azul .trust .ic { color: var(--azul-600); }
.hero-claro .calle { border-top: 1px solid var(--line); background: #fff; }

/* Recuadro Wabbi: logo blanco de Wabbi, sello Meta Business Partner y leyenda */
.meta-badge.con-logos { align-items: center; flex-wrap: wrap; gap: 14px 18px; padding: 14px 20px; width: fit-content; max-width: 100%; }
.meta-badge.con-logos img { display: block; width: auto; }
.meta-badge.con-logos .mb-wabbi { height: 30px; }
.meta-badge.con-logos .mb-meta { height: 46px; }
.meta-badge.con-logos i { width: 1px; height: 36px; background: rgb(255 255 255 / .18); }
.meta-badge.con-logos b { font-size: 15px; }
@media (max-width: 600px) { .meta-badge.con-logos { gap: 12px 14px; padding: 12px 16px; } .meta-badge.con-logos .mb-wabbi { height: 26px; } .meta-badge.con-logos .mb-meta { height: 38px; } .meta-badge.con-logos b { flex-basis: 100%; } }

/* Sello arriba del título del hero */
.hero-sello { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.3; text-wrap: balance; color: #fff; background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.hero-sello .ic { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #fff; background: var(--cian-400, #20b9e5); }
.hero-claro .hero-sello { color: var(--azul-700); background: #fff; box-shadow: 0 6px 18px -10px rgb(19 93 158 / .45), inset 0 0 0 1px rgb(19 93 158 / .14); }
.hero-claro .hero-sello .ic { background: var(--azul-600); }
@media (max-width: 600px) { .hero-sello { font-size: 13px; padding: 7px 14px 7px 8px; border-radius: 16px; } }
.hero-copy .lead + .hero-sello { margin: -10px 0 30px; }

/* ---------- Aviso de cookies ---------- */
.cookies[hidden] { display: none !important; }
.cookies { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 12px 18px; max-width: 520px; padding: 14px 14px 14px 20px; border-radius: 18px; color: rgb(255 255 255 / .86); background: rgb(10 22 40 / .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px -16px rgb(8 29 51 / .55), inset 0 0 0 1px rgb(255 255 255 / .08); font-size: 13.5px; line-height: 1.45; animation: cookies-in .35s ease both; transition: opacity .25s, transform .25s; }
.cookies p { margin: 0; flex: 1; min-width: 0; }
.cookies a { color: var(--cian-300); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookies-acc { display: flex; gap: 8px; flex: none; }
.cookies button { font: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; border: 0; cursor: pointer; transition: background .15s, transform .15s; }
.cookies button:hover { transform: translateY(-1px); }
.cookies-no { color: #fff; background: rgb(255 255 255 / .1); }
.cookies-no:hover { background: rgb(255 255 255 / .18); }
.cookies-si { color: var(--tinta); background: var(--cian-400); }
.cookies-si:hover { background: var(--cian-300); }
.cookies.chau { opacity: 0; transform: translateY(12px); }
@keyframes cookies-in { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 600px) {
  .cookies { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: none; flex-wrap: wrap; padding: 14px 16px; }
  .cookies p { flex-basis: 100%; }
  .cookies-acc { width: 100%; }
  .cookies-acc button { flex: 1; padding: 10px 16px; }
  body.con-cookies .wa-float { bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }
@media (min-width: 601px) {
  .cookies { left: 0; right: 0; bottom: 28px; margin-inline: auto; width: min(780px, calc(100% - 200px)); max-width: none; gap: 16px 28px; padding: 20px 20px 20px 28px; border-radius: 22px; font-size: 15.5px; line-height: 1.5; }
  .cookies button { font-size: 15px; padding: 12px 24px; }
  .cookies-acc { gap: 10px; }
}
@media (min-width: 601px) and (max-width: 900px) { .cookies { left: 24px; right: 96px; width: auto; margin-inline: 0; } }