/* Lenguaje de la campaña de @farma.paulista: fondo aqua, verde plano, sombra menta sin difuminar,
   burbujas de chat, titulares en liviana y negrita, y el diario "El Paulista".
   Sin degradados de relleno, sin sombras suaves de tarjeta y sin íconos de línea. */
@font-face { font-family: "Manrope"; src: url("marca/Manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("marca/Playfair.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --aqua: #B7F2E9;
  --aqua-claro: #DDF9F3;
  --menta-sombra: #D9FCE8;
  --turquesa: #1ED7D1;
  --noche: #021D1E;
  --tinta: #0D2B28;
  --gris-tinta: #4C5F5B;
  --linea: #DCE9E5;
  --curva: cubic-bezier(.2, .8, .2, 1);
}

body { font-family: "Manrope", Arial, Helvetica, sans-serif; color: var(--tinta); font-size: 15.5px; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: inherit; }
::selection { background: var(--verde); color: #fff; }
:focus-visible { outline-color: var(--verde); }

/* titulares: livianos, con la idea clave en negrita */
.h-sec { font-size: clamp(27px, 3.4vw, 42px); font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
.h-sec b { font-weight: 800; }
.seccion { padding-top: 44px; padding-bottom: 26px; }
.titulo-fila { align-items: flex-end; margin-bottom: 18px; }
.ver-todo { font-weight: 700; font-size: 14.5px; color: var(--verde); white-space: nowrap; text-underline-offset: 4px; padding: 6px 0; }

/* ---------- barra de simulación ---------- */
.barra-demo { background: var(--noche); font-size: 11.5px; }
.barra-demo .envase { padding-top: 4px; padding-bottom: 4px; }
.barra-demo a, .barra-demo button { font-size: 11.5px; padding: 2px 8px; border-radius: 5px; }
.sim-corto { display: none; }
@media (max-width: 760px) {
  .sim-largo { display: none; }
  .sim-corto { display: inline; }
  .barra-demo .envase { flex-wrap: nowrap; }
  .barra-demo a, .barra-demo button { white-space: nowrap; padding: 2px 6px; }
}
@media (max-width: 460px) { .sim-corto { display: none; } }

/* ---------- cabecera ---------- */
#cabecera { background: #fff; border-bottom: 1px solid var(--linea); top: -34px; transition: box-shadow .25s; }
body.con-scroll #cabecera { box-shadow: 0 1px 0 var(--linea), 0 10px 26px -18px rgba(13, 43, 40, .35); border-bottom-color: transparent; }
.faixa { background: var(--verde); color: #fff; font-size: 12.5px; }
.faixa .envase { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 34px; }
.faixa p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.faixa b { color: var(--aqua); margin-right: 4px; }
.faixa-sel { display: flex; gap: 12px; flex: none; }
.selector { display: flex; gap: 1px; }
.selector button { background: none; border: 0; color: rgba(255, 255, 255, .78); font-weight: 600; font-size: 12px; padding: 5px 7px; border-radius: 6px; cursor: pointer; }
.selector button[aria-pressed="true"] { background: #fff; color: var(--verde); font-weight: 800; }
.faixa :focus-visible { outline-color: #fff; }
@media (max-width: 620px) { .faixa p span { display: none; } }
.cab { padding-top: 10px; padding-bottom: 10px; }
.buscador input { height: 44px; border: 1.5px solid var(--linea); border-radius: 12px; background: #F5FAF8; padding-right: 90px; }
.buscador input:focus { outline: none; border-color: var(--verde); background: #fff; }
.buscador button { top: 4px; right: 4px; height: 36px; border-radius: 9px; background: var(--verde); font-weight: 700; }
.sugerencias { border-radius: 14px; border-color: var(--linea); box-shadow: -8px 8px 0 var(--menta-sombra); }
.sugerencias .todos { border-top-color: var(--linea); }
.cab-acciones { gap: 18px; align-items: center; }
.enlace-cab { font-weight: 700; text-decoration: none; color: var(--tinta); font-size: 14.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; }
.enlace-cab:hover { color: var(--verde); text-decoration: underline; text-underline-offset: 4px; }
.contador { border-radius: 8px; background: var(--verde); }
.contador.brinca { animation: brincar .5s var(--curva); }
@keyframes brincar { 30% { transform: scale(1.45); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.menu-deps { border-top: 0; }
.menu-deps a { font-weight: 600; font-size: 14px; padding: 8px 12px 11px; }
.menu-deps a:hover { text-decoration: none; color: var(--verde); }
.menu-deps a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--verde); }
@media (max-width: 699px) { .menu-deps { display: none; } .cab { padding-top: 8px; padding-bottom: 8px; gap: 8px; } }

/* ---------- botones: planos, como las tarjetas de la campaña ---------- */
.btn { border-radius: 12px; background: var(--verde); border-color: var(--verde); font-weight: 700; padding: 12px 20px; transition: transform .18s var(--curva), box-shadow .18s var(--curva), background .18s; }
.btn:hover { background: var(--verde); border-color: var(--verde); transform: translate(2px, -2px); box-shadow: -4px 4px 0 var(--aqua); }
.btn:active { transform: none; box-shadow: none; }
.btn.sec { background: transparent; color: var(--verde); }
.btn.sec:hover { background: #fff; color: var(--verde); }
.btn.claro { background: #fff; color: var(--verde); border-color: #fff; }
.btn.claro:hover { background: #fff; box-shadow: -4px 4px 0 var(--turquesa); }
.btn.peligro:hover { background: var(--rojo-fondo); border-color: var(--rojo); box-shadow: none; }
.btn[disabled], .btn[disabled]:hover, .btn[aria-disabled="true"] { background: #EDF1F0; border-color: #EDF1F0; color: var(--gris); box-shadow: none; transform: none; }

/* ---------- portada ---------- */
.hero { position: relative; overflow: hidden; }
.hero-pista { display: grid; }
.hero-slide { grid-area: 1 / 1; visibility: hidden; position: relative; overflow: hidden; z-index: 0; }
.hero-slide.saliente { visibility: visible; z-index: 1; }
.hero-slide.activa { visibility: visible; z-index: 2; }
/* la diapositiva nueva se abre en círculo desde la escena; la anterior se aparta */
.hero-slide.revela { animation: abrir 1s cubic-bezier(.76, 0, .18, 1) both; }
@keyframes abrir { from { clip-path: circle(0% at 74% 52%); } to { clip-path: circle(142% at 74% 52%); } }
@media (max-width: 899px) { .hero-slide.revela { animation-name: abrir-movil; } @keyframes abrir-movil { from { clip-path: circle(0% at 50% 78%); } to { clip-path: circle(150% at 50% 78%); } } }
.hero-slide.saliente .hero-texto, .hero-slide.saliente .hero-escena { transition: transform .8s cubic-bezier(.76, 0, .18, 1), opacity .5s; opacity: .25; transform: scale(.96); }
.hero-rejilla { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 26px; padding-bottom: 0; height: 100%; align-content: start; }
@media (min-width: 900px) { .hero-rejilla { grid-template-columns: minmax(0, 46%) minmax(0, 54%); min-height: 640px; align-content: center; padding-top: 0; } }
.hero-texto { position: relative; z-index: 3; padding-bottom: 12px; }
@media (min-width: 900px) { .hero-texto { padding-bottom: 54px; } }
.hero-titulo { font-size: clamp(36px, 5vw, 68px); font-weight: 400; line-height: 1.03; letter-spacing: -.035em; }
.hero-titulo b { font-weight: 800; }
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .26em; margin-bottom: -.26em; }
.l { display: inline-block; }
.hero-titulo > span { display: block; }
.hero-bajada { font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.5; margin-top: 16px; max-width: 46ch; opacity: .86; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hero-slide.activa .l { animation: asoma .75s cubic-bezier(.2, 1.15, .35, 1) both; animation-delay: calc(var(--i) * 16ms + 80ms); }
.hero-slide.revela .l { animation-delay: calc(var(--i) * 16ms + 360ms); }
.hero-slide.revela .hero-bajada { animation-delay: .75s !important; }
.hero-slide.revela .hero-acciones { animation-delay: .85s !important; }
.hero-slide.activa .hero-bajada { animation: subir .7s var(--curva) both .38s; }
.hero-slide.activa .hero-acciones { animation: subir .7s var(--curva) both .48s; }
.hero-slide.activa .cabecera-jornal { animation: subir .6s var(--curva) both; }
@keyframes asoma { from { transform: translateY(120%) rotate(10deg); transform-origin: left bottom; } to { transform: none; transform-origin: left bottom; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 1. aqua con la bolsa */
.s-aqua { background: linear-gradient(180deg, #BEF5EF, #ADF0E6); color: var(--tinta); }
/* los brazos entran desde el borde de la pantalla: la escena se apoya en la diapositiva, no en el envase */
.s-aqua .hero-rejilla, .s-aqua .hero-escena, .s-jornal .hero-rejilla, .s-jornal .hero-escena { position: static; }
.s-aqua .hero-escena { min-height: 320px; }
.cena { position: absolute; right: 0; bottom: 0; width: min(372px, 100%); aspect-ratio: 843 / 795; }
@media (min-width: 900px) {
  .s-aqua .hero-escena { min-height: 0; }
  .cena { width: min(50vw, 672px); }
}
.cena-base { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 3%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 3%); mask-composite: intersect; }
.obj { position: absolute; display: block; will-change: transform; }
.obj img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 14px rgba(6, 65, 58, .28)); }
.o-cinta { left: 12.5%; top: 16%; width: 23%; }
.o-mancuerna { left: 10%; top: 42%; width: 23%; }
.o-corazon { left: 16%; top: 70%; width: 21%; }
.o-brazo { left: 72%; top: 34%; width: 17%; }
.o-etiqueta { left: 65%; top: 73%; width: 16.5%; }
/* los objetos salen de la bolsa, cada uno por su lado */
.hero-slide.activa .cena .obj { animation: salir-de-bolsa 1.05s cubic-bezier(.2, 1.3, .35, 1) both; }
.o-cinta { --dx: 170%; --dy: 110%; } .o-mancuerna { --dx: 190%; --dy: 10%; } .o-corazon { --dx: 180%; --dy: -90%; } .o-brazo { --dx: -190%; --dy: 40%; } .o-etiqueta { --dx: -130%; --dy: -130%; }
.hero-slide.activa .o-cinta { animation-delay: .3s; } .hero-slide.activa .o-mancuerna { animation-delay: .4s; } .hero-slide.activa .o-corazon { animation-delay: .5s; } .hero-slide.activa .o-brazo { animation-delay: .35s; } .hero-slide.activa .o-etiqueta { animation-delay: .45s; }
.hero-slide.revela .cena .obj { animation-delay: .55s; }
@keyframes salir-de-bolsa { from { opacity: 0; translate: var(--dx) var(--dy); scale: .15; rotate: -40deg; } 40% { opacity: 1; } to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } }
@keyframes flotar { from { translate: 0 -7px; } to { translate: 0 9px; } }
/* destellos de la varita */
.faisca { position: absolute; z-index: 3; width: 10px; height: 10px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: titilar 2.4s ease-in-out infinite; }
.f1 { left: 34%; top: 5%; } .f2 { left: 38%; top: 14%; animation-delay: .7s; width: 7px; height: 7px; } .f3 { left: 47%; top: 19%; animation-delay: 1.3s; }
@keyframes titilar { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.25) rotate(25deg); } }

/* 2. la cortina, de noche */
.s-noite { background: var(--noche); color: #fff; }
.s-noite .hero-bajada { opacity: .84; }
.s-noite .hero-titulo b { color: #fff; }
.foto-cortina { position: absolute; inset: 0; background: url("marca/campanha/piezas/cortina.jpg") 72% 50% / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 58%); mask-image: linear-gradient(90deg, transparent 18%, #000 58%); }
.hero-slide.activa .foto-cortina { animation: acercar 9s ease-out both; }
@keyframes acercar { from { transform: scale(1.09); } to { transform: scale(1); } }
.s-noite .hero-escena { position: static; min-height: 240px; }
.s-noite .hero-texto, .s-noite .hero-escena ~ * { z-index: 3; }
.s-noite .btn { background: #fff; color: var(--verde); border-color: #fff; }
.s-noite .btn:hover { box-shadow: -4px 4px 0 var(--turquesa); }
.s-noite .btn.sec { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.s-noite :focus-visible, .hero-mandos :focus-visible { outline-color: currentColor; }
@media (max-width: 899px) {
  .foto-cortina { top: auto; height: 300px; background-position: 60% 50%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%); mask-image: linear-gradient(180deg, transparent 0, #000 34%); }
}

/* 3. novedades: productos reales en un estante */
.s-novidades { background: #EFFBF7; color: var(--tinta); }
.s-novidades .hero-escena { align-self: end; position: relative; z-index: 2; }
.prateleira { display: flex; align-items: flex-end; justify-content: center; gap: 1%; padding-bottom: 62px; position: relative; isolation: isolate; }
.prateleira::after { content: ""; position: absolute; left: 0; right: 0; bottom: 44px; height: 18px; border-radius: 9px; background: var(--verde); z-index: 1; }
/* la animación aísla a cada producto: el fondo propio hace que el blanco de la foto se funda */
.prat-item { position: relative; flex: 1 1 0; min-width: 0; max-width: 260px; text-align: center; background: #EFFBF7; isolation: isolate; }
.prat-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; object-position: bottom; mix-blend-mode: multiply; }
.prat-item b { position: absolute; left: 50%; bottom: -48px; translate: -50% 0; z-index: 2; white-space: nowrap; font-size: clamp(13px, 1.2vw, 16px); font-weight: 800; letter-spacing: -.02em; }
.hero-slide.activa .prat-item { animation: estante .95s cubic-bezier(.3, 1.45, .45, 1) both; animation-delay: calc(var(--p) * 130ms + 420ms); transform-origin: bottom; }
@keyframes estante { from { opacity: 0; translate: 0 -90px; scale: 1 1.08; } 55% { opacity: 1; } to { opacity: 1; translate: 0 0; scale: 1 1; } }
.hero-slide.activa .prateleira::after { animation: trazar .8s cubic-bezier(.76, 0, .18, 1) both .25s; transform-origin: left; }
@keyframes trazar { from { transform: scaleX(0); } to { transform: none; } }
.conversa { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 520px; margin-left: auto; width: 100%; }
.bolha { position: relative; max-width: 86%; padding: 11px 15px 8px; border-radius: 16px 16px 16px 16px; font-size: 15px; line-height: 1.32; background: var(--verde); color: #fff; }
.bolha p { margin: 0; }
.bolha small { display: block; text-align: right; font-size: 10.5px; opacity: .8; margin-top: 3px; }
.bolha small i { font-style: normal; color: #7FD6FF; letter-spacing: -2px; margin-left: 2px; }
.bolha::after { content: ""; position: absolute; bottom: 0; width: 18px; height: 16px; background: inherit; }
.bolha.eu { align-self: flex-end; border-bottom-right-radius: 2px; }
.bolha.eu::after { right: -14px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.bolha.outro { align-self: flex-start; background: #65C8B4; color: var(--tinta); border-bottom-left-radius: 2px; }
.bolha.outro small i { color: #0A665B; }
.bolha.outro::after { left: -14px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.conversa.unica { max-width: none; }
.conversa.unica .bolha { max-width: 94%; margin-right: 12px; }

/* 4. el diario */
.s-jornal { background: #E8ECF0; color: #16191B; }
.s-jornal .hero-titulo { font-family: "Playfair Display", Georgia, serif; font-weight: 800; letter-spacing: -.012em; line-height: 1.04; font-size: clamp(32px, 4.4vw, 60px); }
.s-jornal .hero-titulo b { font-weight: 900; }
.cabecera-jornal { font-family: "Playfair Display", Georgia, serif; border-top: 3px solid #16191B; border-bottom: 1px solid #16191B; padding: 5px 0; display: flex; gap: 8px; align-items: baseline; font-size: 15px; margin-bottom: 14px; }
.cabecera-jornal b { font-weight: 900; letter-spacing: .02em; }
.cabecera-jornal span { font-style: normal; border-left: 1px solid #16191B; padding-left: 8px; }
.s-jornal .btn { background: #16191B; border-color: #16191B; color: #fff; }
.s-jornal .btn:hover { box-shadow: -4px 4px 0 #fff; }
.s-jornal .btn.sec { background: transparent; color: #16191B; }
.s-jornal .hero-escena { min-height: 300px; }
.foto-jornal { position: absolute; right: 0; bottom: 0; height: 300px; width: min(290px, 100%); }
.foto-jornal img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 7%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 7%); mask-composite: intersect; }
@media (min-width: 900px) { .s-jornal .hero-escena { min-height: 0; } .foto-jornal { height: 100%; width: auto; aspect-ratio: 930 / 1040; } .foto-jornal img { object-fit: contain; object-position: bottom right; } }
.hero-slide.activa .foto-jornal img { animation: subir .9s var(--curva) both .15s; }

/* mandos */
.hero-mandos { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5; pointer-events: none; }
.hero-mandos .envase { display: flex; align-items: center; gap: 6px; }
.hero-mandos button { pointer-events: auto; }
.barras { display: flex; gap: 6px; width: 150px; }
.barra { flex: 1; background: none; border: 0; padding: 10px 0; cursor: pointer; }
.barra i { display: block; height: 3px; background: rgba(13, 43, 40, .24); position: relative; overflow: hidden; }
.barra i::after { content: ""; position: absolute; inset: 0; background: var(--tinta); transform: scaleX(0); transform-origin: left; }
.barra.activa i::after { animation: llenar 7s linear forwards; }
.hero.detenido .barra.activa i::after { animation-play-state: paused; }
@keyframes llenar { to { transform: scaleX(1); } }
.hero-pausa, .hero-flecha { background: none; border: 0; color: var(--tinta); width: 34px; height: 34px; padding: 8px; cursor: pointer; border-radius: 9px; transition: background .18s; }
.hero-pausa svg, .hero-flecha svg { display: block; width: 100%; height: 100%; }
.hero-flecha { display: none; }
.hero-pausa:hover, .hero-flecha:hover { background: rgba(13, 43, 40, .1); }
.ico-play { display: none; }
.hero-pausa[aria-pressed="true"] .ico-play { display: block; }
.hero-pausa[aria-pressed="true"] .ico-pausa { display: none; }
@media (min-width: 900px) { .hero-flecha { display: block; } .barras { width: 200px; } }
/* sobre fondos oscuros los mandos pasan a blanco */
.hero[data-oscuro="1"] .barra i { background: rgba(255, 255, 255, .3); }
.hero[data-oscuro="1"] .barra i::after { background: #fff; }
.hero[data-oscuro="1"] .hero-pausa, .hero[data-oscuro="1"] .hero-flecha { color: #fff; }
.hero[data-oscuro="1"] .hero-pausa:hover, .hero[data-oscuro="1"] .hero-flecha:hover { background: rgba(255, 255, 255, .16); }
@media (max-width: 899px) {
  .hero-texto { padding-bottom: 8px; }
  .hero-mandos { bottom: 4px; }
  .prateleira { padding-bottom: 76px; margin-top: 8px; }
  .prateleira::after { bottom: 58px; height: 14px; }
  .prat-item b { bottom: -44px; }
}

/* ---------- cinta de frases ---------- */
.cinta-frases { background: var(--noche); color: #fff; display: flex; overflow: hidden; transform: skewX(calc(var(--vel, 0) * -1deg)); }
.cinta-frases ul { list-style: none; margin: 0; padding: 0; display: flex; flex: none; animation: correr 38s linear infinite; }
.cinta-frases li { padding: 11px 0; font-weight: 600; font-size: 14.5px; white-space: nowrap; display: flex; align-items: center; }
.cinta-frases li::after { content: ""; width: 9px; height: 9px; margin: 0 20px; background: var(--turquesa); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@media (hover: hover) and (pointer: fine) { .cinta-frases:hover ul { animation-play-state: paused; } }
@keyframes correr { to { transform: translateX(-100%); } }

/* ---------- categorías: las piezas 3D se salen del bloque ---------- */
.vitral { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.vit { position: relative; display: block; min-height: 172px; border-radius: 22px; padding: 16px; text-decoration: none; color: var(--tinta); overflow: hidden; transition: transform .25s var(--curva), box-shadow .25s var(--curva); }
.vit:hover { box-shadow: -8px 8px 0 var(--menta-sombra); }
.vit-tit { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; position: relative; z-index: 2; }
.vit-sub { display: block; font-size: 12.5px; margin-top: 3px; position: relative; z-index: 2; opacity: .78; }
.vit-arte { position: absolute; inset: 0; pointer-events: none; }
.vit-obj { position: absolute; transition: transform .45s var(--curva), translate .3s var(--curva); translate: calc(var(--tx-v, 0) * -16px) calc(var(--ty-v, 0) * -12px); filter: drop-shadow(0 10px 8px rgba(2, 29, 30, .22)); }
.vit-foto { position: absolute; bottom: -4%; height: 60%; width: 50%; object-fit: contain; object-position: bottom; mix-blend-mode: multiply; transition: transform .45s var(--curva); }
.vit-foto:nth-child(1) { left: 2%; transform: rotate(-5deg); }
.vit-foto:nth-child(2) { right: 2%; transform: rotate(5deg); }
.vit:hover .vit-foto:nth-child(1) { transform: rotate(-9deg) translateY(-8px); }
.vit:hover .vit-foto:nth-child(2) { transform: rotate(9deg) translateY(-8px); }
.v-peso { grid-column: 1 / -1; background: var(--verde); color: #fff; min-height: 196px; }
.v-peso .vit-tit { font-size: 30px; }
.v-peso .uno { width: 46%; max-width: 260px; right: 26%; bottom: 8%; }
.v-peso .dos { width: 30%; max-width: 170px; right: 3%; top: 12%; }
.v-peso:hover .uno { transform: rotate(-7deg) scale(1.05); }
.v-peso:hover .dos { transform: rotate(7deg) scale(1.08); }
.v-sup { background: var(--aqua); }
.v-sup .uno { width: 56%; right: 8%; bottom: 6%; }
.v-sup:hover .uno { transform: rotate(-6deg) scale(1.08); }
.v-med { background: var(--turquesa); }
.v-med .uno { width: 48%; right: 12%; bottom: -6%; transform: rotate(8deg); }
.v-med:hover .uno { transform: rotate(-6deg) scale(1.08); }
.v-sau { background: var(--aqua-claro); }
.v-sau .uno { width: 60%; right: 3%; bottom: 5%; }
.v-sau:hover .uno { transform: rotate(-6deg) scale(1.05); }
.v-bb { background: #F2F6F8; } .v-hig { background: #EEF7F3; } .v-bel { background: var(--aqua-claro); }
@media (min-width: 900px) {
  .vitral { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 226px; gap: 14px; }
  .vit { padding: 22px; border-radius: 26px; }
  .vit-tit { font-size: 23px; }
  .v-peso { grid-column: span 6; min-height: 0; }
  .v-peso .vit-tit { font-size: 40px; }
  .v-peso .uno { right: 28%; bottom: 8%; width: 40%; }
  .v-peso .dos { width: 26%; right: 4%; top: 14%; }
  .v-sup { grid-column: span 3; } .v-med { grid-column: span 3; }
  .v-sup .uno { width: 58%; } .v-med .uno { width: 46%; }
  .v-sau, .v-bb, .v-hig, .v-bel { grid-column: span 3; }
  .v-sau .uno { width: 60%; }
}

/* ---------- tarjetas de producto ---------- */
.tarjeta { border: 0; border-radius: 18px; background: transparent; overflow: visible; }
.tarjeta:hover { border: 0; }
.tarjeta .foto { aspect-ratio: 1; padding: 14px; border-radius: 18px; background: #F2FAF7; overflow: hidden; transition: box-shadow .2s var(--curva), transform .2s var(--curva); }
.tarjeta .foto img { mix-blend-mode: multiply; opacity: 0; transition: transform .45s var(--curva), opacity .4s ease; }
.tarjeta .foto img.cargada { opacity: 1; }
@media (hover: hover) {
  .tarjeta:hover .foto { transform: translate(3px, -3px); box-shadow: -7px 7px 0 var(--aqua); }
  .tarjeta:hover .foto img { transform: scale(1.09) translate(calc(var(--tx, 0) * -7px), calc(var(--ty, 0) * -7px)); }
}
/* el descuento habla como una burbuja */
.desc { position: absolute; left: 10px; top: 10px; z-index: 1; font-size: 12px; font-weight: 800; color: #fff; background: var(--verde); padding: 4px 9px; border-radius: 10px 10px 10px 2px; }
.tarjeta .info { padding: 10px 2px 8px; gap: 3px; }
.tarjeta .marca { font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--gris-tinta); font-weight: 600; }
.tarjeta .nombre { font-size: 14.5px; font-weight: 600; min-height: 2.6em; -webkit-line-clamp: 2; line-height: 1.3; }
.tira-etq { min-height: 0; }
.marca-cond { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.tarjeta .abajo { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; padding-top: 6px; }
.precios { min-width: 0; line-height: 1.15; }
.precio { font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: var(--tinta); }
.precio-antes { display: block; margin-left: 0; font-size: 12px; color: var(--gris-tinta); text-decoration: line-through; white-space: nowrap; }
.mas-btn { position: relative; flex: none; width: 44px; height: 44px; border-radius: 13px; border: 0; background: var(--verde); color: #fff; font-size: 24px; font-weight: 500; line-height: 1; cursor: pointer; transition: transform .18s var(--curva), box-shadow .18s var(--curva), background .2s; }
.mas-btn:hover { transform: translate(calc(var(--tx, 0) * 3px), calc(var(--ty, 0) * 3px)) rotate(90deg); box-shadow: -3px 3px 0 var(--aqua); }
.mas-btn.hecho { color: transparent; background: var(--turquesa); transform: none; box-shadow: none; }
.mas-btn.hecho::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--tinta); font-size: 20px; font-weight: 800; animation: tilde .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes tilde { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.mini-accion { font-size: 12.5px; font-weight: 700; color: var(--verde); white-space: nowrap; }
.mini-accion.agotado { color: var(--gris-tinta); }
.grilla { gap: 18px 12px; }
@media (min-width: 640px) { .grilla { gap: 26px 18px; } }

/* ---------- carriles ---------- */
.carril { position: relative; }
.carril .tira { grid-auto-columns: minmax(156px, 44%); gap: 14px; padding: 8px 2px 8px 8px; margin-left: -8px; scroll-padding-left: 8px; scrollbar-width: none; cursor: grab; }
.carril .tira::-webkit-scrollbar { display: none; }
.carril .tira.arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carril .tira.arrastrando a { pointer-events: none; }
@media (min-width: 640px) { .carril .tira { grid-auto-columns: minmax(190px, 24%); } }
@media (min-width: 1100px) { .carril .tira { grid-auto-columns: minmax(200px, 18.8%); gap: 18px; } }
.carril-btn { position: absolute; top: 28%; z-index: 4; width: 44px; height: 44px; padding: 12px; border-radius: 13px; border: 0; background: var(--verde); color: #fff; display: none; cursor: pointer; transition: transform .18s var(--curva), box-shadow .18s var(--curva); }
.carril-btn svg { display: block; width: 100%; height: 100%; }
.carril-btn:hover { transform: translate(2px, -2px); box-shadow: -3px 3px 0 var(--aqua); }
.carril-btn.atras { left: -10px; }
.carril-btn.adelante { right: -10px; }
.carril-btn[hidden] { display: none !important; }
@media (hover: hover) and (min-width: 700px) { .carril-btn { display: block; } }

/* ---------- "Talvez você não saiba": la tarjeta escalonada ---------- */
.talvez { background: linear-gradient(rgba(240, 236, 232, .8), rgba(240, 236, 232, .8)), url("marca/campanha/piezas/ciudad.jpg") center / cover no-repeat; margin-top: 24px; }
.talvez-in { padding-top: 52px; padding-bottom: 60px; display: flex; justify-content: center; }
.degrau { position: relative; width: 100%; max-width: 680px; filter: drop-shadow(-14px 14px 0 var(--menta-sombra)); color: #fff; }
.d1, .d2 { background: var(--verde); }
.d1 { width: 78%; border-radius: 34px; padding: 34px 100px 58px 34px; }
.d1 h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; }
.d2 { margin-left: 22%; margin-top: -30px; border-radius: 34px; padding: 74px 30px 30px 34px; position: relative; }
.d2 p { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.35; margin-bottom: 16px; }
.pin-3d { position: absolute; width: clamp(112px, 25%, 172px); height: auto; right: 1%; top: -26px; }

/* ---------- marcas ---------- */
.marcas { padding: 30px 0 4px; }
.marquesina { display: flex; overflow: hidden; }
.marquesina ul { list-style: none; margin: 0; padding: 0 46px 0 0; display: flex; flex: none; gap: 46px; animation: correr 50s linear infinite; }
.marquesina:focus-within ul { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .marquesina:hover ul { animation-play-state: paused; } }
.marquesina a { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.03em; text-decoration: none; color: var(--verde); white-space: nowrap; display: block; padding: 4px 0; }
.marquesina a:hover { color: var(--tinta); }

/* ---------- cierre, de noche ---------- */
.noite { background: url("marca/campanha/piezas/cortina.jpg") center 40% / cover no-repeat; color: #fff; margin-top: 44px; }
.noite .envase { min-height: 340px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding-top: 44px; padding-bottom: 44px; background: linear-gradient(90deg, rgba(2, 29, 30, .78), transparent 62%); max-width: none; padding-left: max(16px, calc((100vw - 1240px) / 2 + 16px)); }
.noite h2 { font-size: clamp(27px, 3.6vw, 46px); font-weight: 400; letter-spacing: -.025em; line-height: 1.08; max-width: 18em; }
.noite h2 b { font-weight: 800; display: block; }
.noite :focus-visible { outline-color: #fff; }

/* ---------- aparición ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: calc(var(--d, 0) * 60ms); }
.rv.visto { opacity: 1; transform: none; }
.vit.rv.visto { transition: opacity .7s var(--curva), transform .25s var(--curva), box-shadow .25s var(--curva); transition-delay: 0s; transform: perspective(800px) rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 7deg)); --tx-v: var(--tx, 0); --ty-v: var(--ty, 0); }
#contenido.entrando { animation: subir .36s var(--curva) both; }

/* ---------- catálogo ---------- */
.cat-banner { background: var(--aqua); color: var(--tinta); overflow: hidden; }
.cat-banner .envase { position: relative; padding-top: 6px; padding-bottom: 24px; }
.cat-banner .miga, .cat-banner .miga a { color: var(--tinta); }
.cat-banner h1 { font-size: clamp(28px, 4.2vw, 50px); font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
.cat-cuenta { font-size: 13.5px; margin-top: 2px; opacity: .8; }
.cat-obj { position: absolute; right: 16px; bottom: -14px; height: 118%; max-height: 150px; z-index: 0; filter: drop-shadow(0 10px 8px rgba(10, 102, 91, .25)); }
.catalogo { padding-top: 18px; }
.cat-cab { justify-content: flex-end; }
@media (max-width: 959px) { .cat-cab { justify-content: flex-start; } }
.herram select { border-radius: 12px; border-color: var(--linea); }
.filtros-tit { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.filtros .grupo { border-bottom-color: var(--linea); }
.chip { background: var(--aqua-claro); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; border-radius: 10px; }
.vacio { border-radius: 24px; background: var(--aqua-claro); }

/* ---------- ficha ---------- */
.ficha { padding-top: 6px; }
.ficha .foto-grande { border: 0; border-radius: 24px; background: #F2FAF7; overflow: hidden; cursor: zoom-in; }
.ficha .foto-grande img { mix-blend-mode: multiply; transition: transform .25s ease-out; }
.marca-ficha { font-size: 13px; font-weight: 600; color: var(--gris-tinta); }
.ficha .datos h1 { letter-spacing: -.03em; font-weight: 800; }
.ficha .precio { font-size: 32px; letter-spacing: -.03em; }
.ficha .precio-antes { display: inline-block; margin-left: 8px; }
.ficha .precios { margin-bottom: 4px; }
.caja { border-radius: 16px; border-color: var(--linea); }
.caja.suave { background: var(--aqua-claro); }
.comprar .btn { border-radius: 12px; }
.cantidad { border-radius: 12px; border-color: var(--linea); }
.resumen { border-radius: 20px; background: var(--aqua-claro); }
.bloque { border-radius: 20px; border-color: var(--linea); }
.linea { border-bottom-color: var(--linea); }
.linea .mini { border-radius: 12px; background: #F2FAF7; mix-blend-mode: multiply; }
.opcion { border-radius: 12px; }
.opcion:has(input:checked) { background: var(--aqua-claro); }
.tarjeta-pedido { border-radius: 16px; border-color: var(--linea); }
.tarjeta-pedido:hover { box-shadow: -5px 5px 0 var(--aqua); border-color: var(--verde); }

/* ---------- aviso ---------- */
.aviso { border-radius: 16px 16px 2px 16px; background: var(--verde); }

/* ---------- pestañas ---------- */
.pestanas a { font-size: 12.5px; flex-direction: row; gap: 5px; min-height: 54px; font-weight: 700; color: var(--gris-tinta); }
.pestanas a[aria-current="page"] { color: var(--verde); box-shadow: inset 0 3px 0 var(--verde); }
.pestanas .contador { position: static; }

/* ---------- pie ---------- */
#pie { background: var(--noche); color: rgba(255, 255, 255, .84); margin-top: 0; }
.pie { padding-top: 44px; padding-bottom: 26px; }
.pie h3 { color: #fff; margin-bottom: 8px; }
.pie p { margin-bottom: 8px; }
.pie a { color: #fff; text-underline-offset: 3px; }
.pie .logo-pie { width: 160px; margin-bottom: 16px; }
.pie-sim { max-width: var(--ancho); margin: 0 auto; padding: 0 16px 26px; font-size: 12px; color: rgba(255, 255, 255, .62); }
#pie :focus-visible { outline-color: #fff; }
@media (min-width: 900px) { #pie { margin-top: 0; } }

/* ---------- panel ---------- */
.tabla td a b, .tabla td:last-child { white-space: nowrap; }

/* ---------- reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce) {:root:not([data-motion="on"]) .obj, :root:not([data-motion="on"]) .faisca, :root:not([data-motion="on"]) .foto-cortina, :root:not([data-motion="on"]) .foto-jornal img, :root:not([data-motion="on"]) .pin-3d, :root:not([data-motion="on"]) .cat-obj, :root:not([data-motion="on"]) .cinta-frases ul, :root:not([data-motion="on"]) .marquesina ul, :root:not([data-motion="on"]) .pal > span, :root:not([data-motion="on"]) .hero-bajada, :root:not([data-motion="on"]) .hero-acciones, :root:not([data-motion="on"]) .conversa .bolha, :root:not([data-motion="on"]) .cabecera-jornal, :root:not([data-motion="on"]) #contenido.entrando { animation: none !important; }:root:not([data-motion="on"]) .barra.activa i::after { animation: none; transform: scaleX(1); }:root:not([data-motion="on"]) .cinta-frases, :root:not([data-motion="on"]) .marquesina { overflow-x: auto; }:root:not([data-motion="on"]) .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- portada en el celular: el arte tiene que verse sin bajar ---------- */
@media (max-width: 520px) {
  .hero-acciones .btn.sec { display: none; }
  .hero-acciones { margin-top: 16px; }
  .hero-bajada { margin-top: 10px; font-size: 15px; }
}

/* ---------- WhatsApp ---------- */
.ico-wa { width: 20px; height: 20px; flex: none; }
.wa-flotante { position: fixed; right: 16px; bottom: 70px; z-index: 34; display: inline-flex; align-items: center; gap: 0; height: 54px; min-width: 54px; padding: 0 17px; border-radius: 16px 16px 4px 16px; background: var(--verde); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; box-shadow: -4px 4px 0 var(--aqua); transition: transform .2s var(--curva), box-shadow .2s var(--curva); animation: subir .5s var(--curva) both .9s; }
.wa-flotante span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .3s var(--curva), opacity .2s, margin .3s var(--curva); }
.wa-flotante:hover, .wa-flotante:focus-visible { transform: translate(2px, -2px); box-shadow: -6px 6px 0 var(--aqua); }
.wa-flotante:hover span, .wa-flotante:focus-visible span { max-width: 180px; opacity: 1; margin-left: 9px; }
@media (min-width: 900px) { .wa-flotante { bottom: 24px; right: 24px; } }
.btn.wa { width: fit-content; }
@media (prefers-reduced-motion: reduce) {:root:not([data-motion="on"]) .wa-flotante, :root:not([data-motion="on"]) .prat-item { animation: none !important; }:root:not([data-motion="on"]) .tarjeta .foto img { opacity: 1; } }

/* ---------- mapa de categorías ---------- */
.mapa-cats { display: grid; gap: 26px 40px; margin-top: 36px; }
.mapa-cats h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; border-bottom: 2px solid var(--verde); padding-bottom: 7px; margin-bottom: 4px; }
.mapa-cats h2 a { color: inherit; text-decoration: none; }
.mapa-cats .lista-cat a { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.mapa-cats .lista-cat a:hover { color: var(--verde); }
@media (min-width: 640px) { .mapa-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mapa-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- ajustes para el celular ---------- */
.cat-banner h1, .cat-banner .miga, .cat-cuenta { position: relative; z-index: 1; }
@media (max-width: 899px) {
  /* en la ficha, el botón de compra queda siempre a mano */
  .comprar { position: sticky; bottom: 62px; z-index: 6; background: #fff; padding: 8px 0; flex-wrap: nowrap; }
  .comprar .btn { min-width: 0; }
  body:has(.comprar) .wa-flotante { display: none; }
}
@media (max-width: 620px) {
  .cat-obj { max-height: 86px; right: -12px; bottom: -8px; }
}

/* ---------- primera diapositiva: una tapa de revista ---------- */
.s-peso { background: var(--noche); color: #fff; }
.s-peso .btn { background: #fff; color: var(--verde); border-color: #fff; }
.s-peso .btn:hover { box-shadow: -4px 4px 0 var(--turquesa); }
.s-peso .btn.sec { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.s-peso .hero-rejilla { position: static; grid-template-columns: minmax(0, 1fr); padding-top: 22px; padding-bottom: 52px; min-height: 640px; align-content: end; }
.s-peso .hero-escena { position: static; min-height: 0; }
.s-peso .hero-texto { z-index: 3; padding-bottom: 0; }
.s-peso .hero-titulo { font-size: clamp(66px, 15.2vw, 232px); font-weight: 300; line-height: .9; letter-spacing: -.055em; margin-left: -.04em; max-width: 8ch; }
.s-peso .hero-titulo b { font-weight: 800; color: var(--turquesa); display: block; }
.s-peso .hero-bajada { max-width: 38ch; opacity: .84; margin-top: 22px; }
.s-peso .hero-acciones { margin-top: 18px; }
.tapa-atras, .tapa-frente { position: absolute; inset: 0; pointer-events: none; }
.tapa-atras { z-index: 1; }
.tapa-frente { z-index: 4; }
/* un disco plano de la marca sostiene la composición */
.tapa-disco { position: absolute; right: -8%; top: -26%; width: 62vw; max-width: 900px; aspect-ratio: 1; border-radius: 50%; background: var(--verde); }
.hero-slide.activa .tapa-disco { animation: disco 1.2s cubic-bezier(.2, 1.1, .3, 1) both; }
@keyframes disco { from { scale: .2; opacity: 0; } to { scale: 1; opacity: 1; } }
.t-cinta { right: 6%; top: 3%; width: min(36vw, 500px); }
.t-corazon { right: 27%; bottom: 7%; width: min(17vw, 230px); }
.t-brazo { right: 4%; bottom: 6%; width: min(19vw, 260px); }
.t-mancuerna { right: 39%; top: 8%; width: min(13vw, 180px); }
.hero-slide.activa .tapa-atras .obj, .hero-slide.activa .tapa-frente .obj { animation: pieza-entra 1.05s cubic-bezier(.2, 1.35, .35, 1) both; }
.hero-slide.activa .t-cinta { animation-delay: .25s !important; }
.hero-slide.activa .t-mancuerna { animation-delay: .5s !important; }
.hero-slide.activa .t-brazo { animation-delay: .62s !important; }
.hero-slide.activa .t-corazon { animation-delay: .74s !important; }
.hero-slide.revela .tapa-atras .obj, .hero-slide.revela .tapa-frente .obj { animation-delay: .7s !important; }
@keyframes pieza-entra { from { opacity: 0; scale: .3; rotate: -24deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
.s-peso .g1 { left: 58%; top: 12%; } .s-peso .g2 { right: 3%; top: 52%; width: 14px; height: 14px; animation-delay: .6s; } .s-peso .g3 { left: 46%; bottom: 20%; width: 8px; height: 8px; animation-delay: 1.2s; }
@media (max-width: 899px) {
  .s-peso .hero-rejilla { min-height: 590px; padding-bottom: 42px; }
  .s-peso .hero-titulo { font-size: 21vw; }
  .tapa-disco { right: -30%; top: -8%; width: 104vw; }
  .t-cinta { right: -8%; top: 3%; width: 66vw; }
  .t-corazon { right: 4%; bottom: auto; top: 37%; width: 34vw; }
  .t-brazo { display: none; }
  .t-mancuerna { right: auto; left: 5%; top: 5%; width: 30vw; }
}

/* ---------- menú: la especialidad se distingue ---------- */
.menu-peso a { color: var(--verde) !important; font-weight: 800; }
.menu-peso a::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--turquesa); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* ---------- banda de la portada ---------- */
.banda-peso { background: var(--aqua); position: relative; overflow: hidden; }
.banda-peso-in { display: grid; gap: 18px; padding-top: 38px; padding-bottom: 38px; position: relative; }
.bp-texto p { margin-top: 8px; max-width: 40ch; }
.bp-moleculas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.bp-moleculas a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; background: #fff; border-radius: 16px; text-decoration: none; color: var(--tinta); transition: transform .18s var(--curva), box-shadow .18s var(--curva); }
.bp-moleculas a:hover { transform: translate(2px, -2px); box-shadow: -5px 5px 0 var(--verde); }
.bp-moleculas b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.bp-moleculas span { font-size: 13px; color: var(--gris-tinta); white-space: nowrap; }
.banda-peso .btn { width: fit-content; position: relative; z-index: 1; }
.banda-peso .btn:hover { box-shadow: -4px 4px 0 #fff; }
.bp-obj { display: none; }
@media (min-width: 900px) {
  .banda-peso-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) auto; align-items: center; gap: 32px; padding-top: 46px; padding-bottom: 46px; }
}

/* ---------- página de emagrecimento ---------- */
.lp-peso { background: var(--verde); color: #fff; overflow: hidden; }
.lp-peso-in { display: grid; gap: 8px; padding-top: 8px; padding-bottom: 8px; align-items: center; }
.lp-peso .miga, .lp-peso .miga a { color: rgba(255, 255, 255, .85); }
.lp-peso h1 { font-size: clamp(32px, 4.6vw, 58px); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; margin-top: 8px; }
.lp-peso h1 b { font-weight: 800; color: var(--aqua); }
.lp-texto p { margin-top: 12px; max-width: 46ch; opacity: .9; }
.lp-peso :focus-visible { outline-color: #fff; }
.btn.sec-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn.sec-claro:hover { background: transparent; box-shadow: -4px 4px 0 var(--turquesa); }
.lp-arte { position: relative; height: 180px; }
.lp-cinta { position: absolute; left: 8%; top: 4%; width: min(250px, 56%); filter: drop-shadow(0 14px 10px rgba(2, 29, 30, .3)); }
.lp-corazon { position: absolute; right: 8%; bottom: 0; width: min(150px, 34%); filter: drop-shadow(0 14px 10px rgba(2, 29, 30, .3)); }
@media (min-width: 900px) {
  .lp-peso-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); padding-top: 14px; padding-bottom: 40px; }
  .lp-arte { height: 300px; }
  .lp-cinta { width: min(340px, 78%); }
  .lp-corazon { width: min(190px, 44%); }
}
.lp-pasos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.lp-pasos li { display: flex; gap: 12px; align-items: flex-start; background: var(--aqua-claro); border-radius: 18px; padding: 16px; }
.lp-pasos span { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px 10px 10px 2px; background: var(--verde); color: #fff; font-weight: 800; }
.lp-pasos b { display: block; font-size: 16px; letter-spacing: -.01em; }
.lp-pasos p { font-size: 13.5px; color: var(--gris-tinta); margin-top: 2px; line-height: 1.4; }
@media (min-width: 800px) { .lp-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.lp-filtros { display: grid; gap: 10px; margin-top: 30px; scroll-margin-top: 110px; }
.pastillas { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilla-p, .pastilla-m { text-decoration: none; color: var(--tinta); border-radius: 11px; font-weight: 700; transition: background .15s, color .15s; display: inline-flex; align-items: center; }
.pastilla-p { background: var(--aqua-claro); padding: 10px 16px; font-size: 15px; min-height: 44px; }
.pastilla-m { border: 1.5px solid var(--linea); padding: 6px 12px; font-size: 13px; min-height: 36px; font-weight: 600; }
.pastilla-p:hover, .pastilla-m:hover { background: var(--aqua); }
.pastilla-p[aria-current="true"], .pastilla-m[aria-current="true"] { background: var(--verde); color: #fff; border-color: var(--verde); }
.lp-tit { margin: 26px 0 16px; font-size: clamp(22px, 2.6vw, 30px); }
.lp-avisos { display: grid; gap: 10px; margin-top: 30px; }
@media (min-width: 800px) { .lp-avisos { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {:root:not([data-motion="on"]) .lp-cinta, :root:not([data-motion="on"]) .lp-corazon, :root:not([data-motion="on"]) .arte-fondo { animation: none !important; } }

/* ---------- bloque de emagrecimento en el celular: las piezas no pisan el título ---------- */
@media (max-width: 899px) {
  .v-peso { min-height: 214px; }
  .v-peso .uno { width: 44%; right: 28%; bottom: 6%; }
  .v-peso .dos { width: 26%; right: 4%; top: auto; bottom: 10%; }
}

/* ---------- nota breve sobre la venta en la ficha ---------- */
.nota-venta { font-size: 13.5px; color: var(--gris-tinta); }

/* ---------- la vida de cada pieza ---------- */
.hero-slide.activa .vida-latido, .lp-arte .vida-latido, .cat-banner .vida-latido, .vit:hover .vida-latido { animation: latido 1.5s ease-in-out infinite; }
.hero-slide.activa .vida-levantar, .vit:hover .vida-levantar { animation: levantar 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.hero-slide.activa .vida-flexionar, .cat-banner .vida-flexionar, .vit:hover .vida-flexionar { animation: flexionar 2.8s ease-in-out infinite; transform-origin: 30% 80%; }
.hero-slide.activa .vida-pendulo, .cat-banner .vida-pendulo, .vit:hover .vida-pendulo { animation: pendulo 2.8s ease-in-out infinite; transform-origin: 80% 8%; }
.hero-slide.activa .vida-soltar, .lp-arte .vida-soltar, .cat-banner .vida-soltar, .vit:hover .vida-soltar { animation: soltar 5.5s ease-in-out infinite; }
.degrau .vida-saltar { animation: saltar 2.6s cubic-bezier(.45, 0, .55, 1) infinite; transform-origin: bottom; }
@keyframes latido { 0%, 58%, 100% { transform: scale(1); } 12% { transform: scale(1.13); } 26% { transform: scale(1); } 38% { transform: scale(1.09); } }
@keyframes levantar { 0%, 100% { transform: translateY(9px) rotate(7deg); } 50% { transform: translateY(-16px) rotate(-9deg); } }
@keyframes flexionar { 0%, 100% { transform: scale(1) rotate(0); } 45% { transform: scale(1.09) rotate(-5deg); } }
@keyframes pendulo { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes soltar { 0%, 100% { transform: translateY(5px) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(5deg); } }
@keyframes saltar { 0%, 100% { transform: translateY(0) scale(1, 1); } 8% { transform: translateY(0) scale(1.05, .95); } 45% { transform: translateY(-18px) scale(.98, 1.03); } 82% { transform: translateY(0) scale(1, 1); } 90% { transform: translateY(0) scale(1.04, .96); } }

/* onda que acompaña el latido */
.t-corazon::before { content: ""; position: absolute; inset: 14%; z-index: -1; border-radius: 50%; border: 3px solid var(--aqua); opacity: 0; }
.hero-slide.activa .t-corazon::before { animation: onda 1.5s ease-out infinite; }
@keyframes onda { 0% { opacity: .75; transform: scale(.7); } 60%, 100% { opacity: 0; transform: scale(1.5); } }

/* la escena se inclina: las piezas tienen profundidad real */
[data-escena] { transform-style: preserve-3d; will-change: transform; }
.tapa-atras, .tapa-frente, .cena, .prateleira, .foto-jornal { translate: 0 calc(var(--sc, 0) * -46px); }
.hero-texto { translate: 0 calc(var(--sc, 0) * 34px); opacity: calc(1 - var(--sc, 0) * .9); }

/* imanes de la portada */
[data-iman] { transform: translate(calc(var(--tx, 0) * 7px), calc(var(--ty, 0) * 5px)); }
.btn[data-iman]:hover { transform: translate(calc(var(--tx, 0) * 7px), calc(var(--ty, 0) * 5px)); }

/* cambio de página */
#cabecera { view-transition-name: cabecera; }
::view-transition-old(root) { animation: vt-sale .24s ease both; }
::view-transition-new(root) { animation: vt-entra .46s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes vt-sale { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {:root:not([data-motion="on"]) .hero-slide.revela, :root:not([data-motion="on"]) .obj, :root:not([data-motion="on"]) .obj img, :root:not([data-motion="on"]) .vit-obj, :root:not([data-motion="on"]) .lp-cinta, :root:not([data-motion="on"]) .lp-corazon, :root:not([data-motion="on"]) .cat-obj, :root:not([data-motion="on"]) .pin-3d, :root:not([data-motion="on"]) .l, :root:not([data-motion="on"]) .tapa-disco, :root:not([data-motion="on"]) .prat-item, :root:not([data-motion="on"]) .prateleira::after, :root:not([data-motion="on"]) .t-corazon::before { animation: none !important; }:root:not([data-motion="on"]) ::view-transition-old(root), :root:not([data-motion="on"]) ::view-transition-new(root) { animation: none; }
}

/* el título de la Linha Corpo siempre libre */
.v-peso .vit-tit, .v-peso .vit-sub { position: relative; z-index: 3; }
@media (min-width: 900px) {
  .v-peso .uno { width: 32%; right: 26%; bottom: 6%; }
  .v-peso .dos { width: 24%; right: 5%; top: auto; bottom: 16%; }
}

/* ---------- panel: analíticas y clientes ---------- */
.aviso-datos { display: inline-block; background: var(--ambar-fondo); color: #553700; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 8px; margin-bottom: 14px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; min-width: 0; }
.kpi h3 { font-size: 12.5px; font-weight: 600; color: var(--gris-tinta); }
.kpi b { display: block; font-size: clamp(20px, 2vw, 25px); font-weight: 800; letter-spacing: -.03em; margin-top: 4px; line-height: 1.15; overflow-wrap: anywhere; }
.kpi-d { display: block; font-size: 12px; color: var(--gris-tinta); margin-top: 5px; font-weight: 600; }
.kpi-d.bien { color: var(--verde); } .kpi-d.mal { color: var(--rojo); }
.kpi-d i { font-style: normal; font-size: 10px; }
.kpi-d span { color: var(--gris-tinta); font-weight: 500; }
.tarjeta-dato { border: 1px solid var(--linea); border-radius: 18px; padding: 18px; margin-bottom: 14px; min-width: 0; }
.td-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.td-cab h2, .td-sub { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.td-sub { margin: 18px 0 12px; }
.td-nota { font-size: 12.5px; color: var(--gris-tinta); margin-top: 10px; }
.rejilla-datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.rejilla-datos .tarjeta-dato { margin-bottom: 0; }
@media (min-width: 1100px) { .rejilla-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--gris-tinta); }
.leyenda li { display: flex; align-items: center; gap: 6px; }
.ley-a, .ley-b { display: inline-block; width: 16px; height: 2px; border-radius: 2px; }
.ley-a { background: var(--verde); } .ley-b { background: #8E9C98; }
.grafico { width: 100%; min-height: 210px; outline-offset: 4px; touch-action: pan-y; cursor: crosshair; }
.grafico svg { display: block; }
.g-reja { stroke: #E7EEEC; stroke-width: 1; }
.g-eje { fill: var(--gris-tinta); font-size: 11.5px; }
.g-linea, .g-antes { fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-width: 2; }
.g-linea { stroke: var(--verde); stroke-dasharray: 1; animation: trazar-l 1.1s cubic-bezier(.6, 0, .2, 1) both; }
.g-antes { stroke: #8E9C98; stroke-dasharray: 1; animation: trazar-l 1.1s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes trazar-l { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.g-area { fill: var(--verde); opacity: .09; animation: subir-area .9s ease both .4s; }
@keyframes subir-area { from { opacity: 0; } to { opacity: .09; } }
.g-fin { fill: var(--verde); stroke: #fff; stroke-width: 2; animation: subir-area2 .3s ease both 1s; }
.g-fin-t { fill: var(--tinta); font-size: 12px; font-weight: 800; animation: subir-area2 .3s ease both 1s; }
@keyframes subir-area2 { from { opacity: 0; } to { opacity: 1; } }
.g-cruz line { stroke: var(--tinta); stroke-width: 1; opacity: .35; }
.g-p-a { fill: var(--verde); stroke: #fff; stroke-width: 2; }
.g-p-b { fill: #8E9C98; stroke: #fff; stroke-width: 2; }
.tip-datos { position: fixed; z-index: 90; background: var(--noche); color: #fff; border-radius: 10px; padding: 8px 11px; font-size: 12.5px; pointer-events: none; min-width: 120px; box-shadow: 0 8px 22px rgba(2, 29, 30, .28); }
.tip-datos[hidden] { display: none; }
.tip-cab { font-weight: 600; opacity: .85; }
.tip-fila { display: flex; align-items: center; gap: 7px; margin-top: 3px; white-space: nowrap; }
.tip-fila i { width: 12px; height: 2px; flex: none; }
.tip-fila i.ley-a { background: var(--turquesa); } .tip-fila i.ley-b { background: #B6C2BF; }
.tip-fila span { opacity: .78; }
.barras-h { display: grid; gap: 2px; }
.bh { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px; border-radius: 8px; text-decoration: none; color: inherit; font-size: 13.5px; }
a.bh:hover { background: var(--aqua-claro); }
.bh-nombre { min-width: 0; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bh-nombre small { display: block; font-weight: 500; color: var(--gris-tinta); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-pista { display: block; min-width: 0; }
.bh-pista i { display: block; height: 14px; background: var(--verde); border-radius: 0 4px 4px 0; transform-origin: left; animation: crecer .7s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--o) * 45ms); }
.bh-pista i.gris { background: #B6C2BF; }
@keyframes crecer { from { transform: scaleX(0); } to { transform: none; } }
.bh-valor { font-weight: 800; font-size: 13px; white-space: nowrap; letter-spacing: -.01em; }
.conmuta { display: flex; background: #F1F6F4; border-radius: 10px; padding: 3px; }
.conmuta a { font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 8px; text-decoration: none; color: var(--gris-tinta); }
.conmuta a[aria-current="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(13, 43, 40, .14); }
.ver-tabla { margin-top: 12px; font-size: 13px; }
.ver-tabla summary { cursor: pointer; color: var(--verde); font-weight: 700; padding: 4px 0; width: fit-content; }
.ver-tabla .tabla-envase { margin-top: 8px; max-height: 280px; overflow: auto; }
.calor { display: grid; grid-template-columns: 34px repeat(11, minmax(0, 1fr)); gap: 3px; align-items: center; }
.calor i { display: block; height: 28px; border-radius: 4px; transition: outline-color .1s; outline: 2px solid transparent; outline-offset: -1px; }
.calor i:hover { outline-color: var(--tinta); }
.calor-h { font-size: 11px; color: var(--gris-tinta); text-align: center; }
.calor-d { font-size: 11.5px; color: var(--gris-tinta); font-weight: 600; }
.escala { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--gris-tinta); }
.escala i { display: block; width: 90px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #D9F2EC, #0A665B); }
.toca { list-style: none; margin: 0; padding: 0; }
.toca li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.toca li:last-child { border-bottom: 0; }
.toca a { text-decoration: none; color: inherit; min-width: 0; }
.toca a:hover b { color: var(--verde); text-decoration: underline; }
.toca small { display: block; color: var(--gris-tinta); font-size: 12.5px; }
.estado-pill.vip { background: var(--verde); color: #fff; }
.estado-pill.recurrente { background: var(--aqua); color: var(--verde-hondo); }
.estado-pill.nuevo { background: #E6F1FB; color: #124A7A; }
.estado-pill.riesgo { background: var(--ambar-fondo); color: var(--ambar); }
.estado-pill.inactivo { background: #EDF1F0; color: var(--gris); }
.estado-pill.ocasional { background: #F1F6F4; color: var(--gris-tinta); }
.columnas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; height: 170px; align-items: end; }
.col { display: grid; grid-template-rows: 1fr 18px; height: 100%; align-items: end; text-align: center; }
.col i { display: block; background: var(--verde); border-radius: 4px 4px 0 0; transform-origin: bottom; max-width: 24px; width: 100%; margin: 0 auto; animation: crecer-v .6s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--o) * 35ms); }
.col span { font-size: 11px; color: var(--gris-tinta); }
@keyframes crecer-v { from { transform: scaleY(0); } to { transform: none; } }
.tabla th a { color: inherit; }
@media (max-width: 620px) {
  .bh { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; }
  .bh-nombre { grid-column: 1; }
  .bh-valor { grid-column: 2; grid-row: 1; }
  .bh-pista { grid-column: 1 / -1; }
  .calor { grid-template-columns: 28px repeat(11, minmax(0, 1fr)); gap: 2px; }
  .calor i { height: 22px; }
  .kpi-d span { display: none; }
}
@media (prefers-reduced-motion: reduce) {:root:not([data-motion="on"]) .g-linea, :root:not([data-motion="on"]) .g-antes, :root:not([data-motion="on"]) .g-area, :root:not([data-motion="on"]) .g-fin, :root:not([data-motion="on"]) .g-fin-t, :root:not([data-motion="on"]) .bh-pista i, :root:not([data-motion="on"]) .col i { animation: none !important; }:root:not([data-motion="on"]) .g-area { opacity: .09; } }

/* ---------- tapa: el titular siempre se lee entero ---------- */
@media (min-width: 900px) {
  .s-peso .hero-titulo { font-size: clamp(84px, 12vw, 190px); }
  .t-cinta { right: 3%; top: 2%; width: min(29vw, 420px); }
  .t-mancuerna { right: 28%; top: 37%; width: min(12vw, 165px); }
  .t-corazon { right: 22%; bottom: 8%; width: min(14vw, 195px); }
  .t-brazo { right: 3%; bottom: 7%; width: min(17vw, 235px); }
}

/* en el panel no hay franja superior: la cabecera queda entera */
#cabecera:not(:has(.faixa)) { top: 0; }

/* tapa en el celular: dos líneas, y el botón a la vista */
@media (max-width: 899px) {
  .s-peso .hero-titulo { font-size: 18vw; max-width: none; }
  .s-peso .hero-rejilla { min-height: 560px; padding-bottom: 46px; }
  .s-peso .hero-bajada { margin-top: 12px; }
  .s-peso .hero-acciones { margin-top: 12px; }
  .t-corazon { top: 33%; width: 30vw; }
}