/* ==========================================================
   BORA BORAZZA · tema sobre la base reutilizable
   Turquesa principal, blanco base, acentos rosa neón (del letrero "Be here now").
   ========================================================== */
:root {
  --red: #0FA5AF;          /* turquesa (reemplaza el rojo de la base) */
  --red-deep: #0A7E87;
  --cream: #FFFFFF;
  --paper: #E6F6F6;
  --ink: #06282D;
  --pink: #FF2E9A;
  --turq: #5CC9CF;
  --f-melt: "Avenir Next", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --f-display: "Anton", Impact, "Arial Narrow", sans-serif;
}
.melt { font-weight: 800; text-transform: none; letter-spacing: -.035em; line-height: .95; font-variation-settings: normal; }
.melt.is-in { font-variation-settings: normal; }
.hand-note { color: var(--pink); }
.hand-note--cream { color: #fff; }
body::before { opacity: .03; }
.hero::before, .board__badge, .loc__paper::before { display: none; }
[class*="ph--"] img { object-fit: contain; padding: 18%; background: #fff; }
.btn--pink { --bg: var(--pink); --fg: #fff; --bd: var(--ink); --sh: var(--ink); }
.demo-pill { background: rgba(255,255,255,.92); border-color: var(--pink); color: var(--ink); }

/* ---------- HERO ---------- */
.bhero { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; background: var(--ink); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 50px) 20px calc(104px + env(safe-area-inset-bottom)); }
.bhero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -2;
  animation: kenburns 22s ease-in-out infinite alternate; }
.bhero__shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,40,45,.35) 0%, rgba(6,40,45,.05) 30%, rgba(6,40,45,.55) 62%, rgba(6,40,45,.92) 100%),
              radial-gradient(60% 40% at 80% 8%, rgba(255,46,154,.35), transparent 70%); }
.bhero__logo { display: block; width: clamp(130px, 28vw, 210px); height: auto; background: #fff; border-radius: 22px; padding: 8px 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.28); animation: popin .9s cubic-bezier(.2,.8,.2,1) both; }
.bhero__main { max-width: 760px; }
.bhero__kicker { font: 700 12px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--turq); margin-bottom: 12px; }
.bhero__title { font: 400 clamp(54px, 17.5vw, 190px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: .005em; color: #fff;
  text-shadow: 0 0 22px rgba(255,46,154,.55), 0 0 60px rgba(255,46,154,.25); }
.bl { display: inline-flex; }
.bl > span { display: inline-block; animation: letter .8s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(var(--n, 0) * 55ms + .25s); }
.bl > span:nth-child(1){--n:0}.bl > span:nth-child(2){--n:1}.bl > span:nth-child(3){--n:2}.bl > span:nth-child(4){--n:3}.bl > span:nth-child(5){--n:4}
.bl > span:nth-child(6){--n:5}.bl > span:nth-child(7){--n:6}.bl > span:nth-child(8){--n:7}.bl > span:nth-child(9){--n:8}.bl > span:nth-child(10){--n:9}
.bl > span:nth-child(5n+2) { color: var(--pink); text-shadow: 0 0 18px var(--pink); }
.bhero__sub { max-width: 34ch; margin: 14px 0 22px; font-size: 17px; line-height: 1.4; color: rgba(255,255,255,.92); }
.bhero__card { position: absolute; margin: 0; border: 5px solid #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px rgba(0,0,0,.38); display: none; }
.bhero__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bhero__card--a { right: 5vw; top: 16%; width: clamp(160px, 20vw, 270px); aspect-ratio: 4/5; rotate: 5deg; animation: floaty 7s ease-in-out infinite; }
.bhero__card--b { right: 18vw; bottom: 18%; width: clamp(130px, 15vw, 210px); aspect-ratio: 3/4; rotate: -6deg; animation: floaty 8s 1.2s ease-in-out infinite; }
@media (min-width: 820px) { .bhero__card { display: block; } .bhero { padding-inline: 6vw; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-1.5%, 1%); } }
@keyframes letter { from { opacity: 0; transform: translateY(70%) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes popin { from { opacity: 0; transform: scale(.8) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .bhero__bg, .bhero__card, .bl > span, .bhero__logo { animation: none !important; } }

/* ---------- Cinta, secciones ---------- */
.ribbon { background: var(--pink); color: #fff; }
.menu, .social { background: #fff; }
.more { background: linear-gradient(135deg, var(--red) 0%, #0B8E98 100%); }
.more__card { border-radius: 22px; overflow: hidden; }
.more__ph { object-fit: cover; }
.exp { background: var(--ink); }
.exp .melt { color: #fff; }
.exp .hand-note { color: var(--pink); }
.bcollage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 12px; }
.bt { margin: 0; position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.bt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.bt:hover img { transform: scale(1.07); }
.bt figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--ink); font: 700 12px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.bt--1 { rotate: -2deg; } .bt--2 { rotate: 2deg; margin-top: 26px; } .bt--3 { rotate: 1.5deg; } .bt--4 { rotate: -2.5deg; margin-top: 26px; }
.bt--ph { grid-column: 1 / -1; order: -1; font: 400 clamp(64px, 20vw, 170px)/.9 var(--f-display); text-align: center; color: transparent; -webkit-text-stroke: 2px var(--pink); text-shadow: 0 0 28px rgba(255,46,154,.6); }
.bt--ph span { color: var(--pink); }
.bt--ph { transform: none; }
@media (min-width: 820px) { .bcollage { grid-template-columns: repeat(4, 1fr); } .bt--ph { grid-column: 1 / -1; order: 0; grid-row: 2; } .bt--1{order:1}.bt--2{order:2}.bt--3{order:3}.bt--4{order:4} .bt--ph{order:5} }
.loc { background: var(--red); }
.suc { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.suc li { padding: 8px 16px; border-radius: 999px; background: var(--pink); color: #fff; font: 800 15px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
.foot { background: #fff; color: var(--ink); }
.foot__logo { background: #fff; width: 220px; height: auto; border-radius: 16px; }
.foot__tag { font-family: var(--f-display); color: var(--pink); }
.foot a { color: var(--red-deep); }
.loyal__logo { background: #fff; border-radius: 14px; padding: 4px 6px; height: auto; width: 140px; }
.loc__title { font-size: clamp(34px, 8.5vw, 92px); letter-spacing: -.02em; overflow-wrap: anywhere; }
.suc button { padding: 9px 18px; border-radius: 999px; border: 2px solid var(--pink); background: transparent; color: var(--pink);
  font: 800 15px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: all .25s var(--ease); }
.suc button[aria-selected="true"] { background: var(--pink); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,46,154,.4); }
.suc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.bsel { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.bsel button { padding: 8px 15px; border-radius: 999px; border: 2px solid var(--red); background: #fff; color: var(--red-deep);
  font: 800 13px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: all .25s var(--ease); }
.bsel button[aria-selected="true"] { background: var(--red); color: #fff; }
.bsel::before { content: "Sucursal"; align-self: center; font: 700 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--pink); margin-right: 4px; }
.ask--branch select { width: 100%; padding: 12px; border: 2px solid var(--ink); border-radius: 12px; font: 600 16px var(--f-ui); background: #fff; }

/* La barra flotante inferior no debe tapar los botones del panel: se deja espacio al final de cada vista interior */
.view:not(#view-home) { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
html { scroll-padding-bottom: 132px; }
.adm-edit .adm-actions, .adm-actions { scroll-margin-bottom: 140px; }