/* Scoped decorative animation. Inherits Beesible design tokens. */
.baa-google-02 {
      --baa-google-02-ink:var(--color-text,#1d1d1d);
      --baa-google-02-muted:var(--color-text-muted,#666);
      --baa-google-02-muted-2:var(--neutral-400,#a4a4a4);
      --baa-google-02-line:var(--color-border,#d9d9d9);
      --baa-google-02-line-strong:var(--color-border-strong,#666);
      --baa-google-02-purple:var(--color-brand,#6818aa);
      --baa-google-02-purple-dark:var(--color-action-hover,#5c1596);
      --baa-google-02-purple-soft:var(--color-action-soft,#f8f5ff);
      --baa-google-02-purple-soft-2:var(--surface-section,#f8f5ff);
      --baa-google-02-cyan:var(--cyan-500,#18d3d6);
      --baa-google-02-cyan-soft:var(--cyan-100,#d2f8f9);
      --baa-google-02-green:var(--color-success,#15803d);
      --baa-google-02-green-soft:var(--color-success-surface,#edf7ed);
      --baa-google-02-shadow:var(--shadow-card,0 16px 44px rgba(57,34,73,.08));
    }

.baa-google-02 * { box-sizing:border-box; }

.baa-google-02 {
      width:100%;
      height:100%;
      margin:0;
      overflow:visible;
      background:transparent;
      color:var(--baa-google-02-ink);
      font-family:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    }

.baa-google-02 { display:grid; place-items:center; }

.baa-google-02 .baa-google-02__stage {
      width:100%;
      height:auto;
      min-height:0;
      padding:0;
      display:grid;
      place-items:center;
      background:transparent;
    
      padding-left:0;
      padding-right:0;
      overflow:visible;}

.baa-google-02 .baa-google-02__demo {
      width:100%;
      min-height:440px;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      position:relative;
      overflow:visible;
      border:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
    
      padding:0;
      gap:var(--gap-layout, 32px);}

.baa-google-02 .baa-google-02__panel {
      min-width:0;
      padding:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position:relative;
    }

.baa-google-02 .baa-google-02__panel.baa-google-02__beesible {
      background:transparent;
      border-right:0;
    
      border-left:0;}

.baa-google-02 .baa-google-02__panel.baa-google-02__google {
      background:transparent;
      border-left:0;
    
      border-right:0;}

.baa-google-02 .baa-google-02__topline {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      min-height:30px;
      margin-bottom:18px;
    }

.baa-google-02 .baa-google-02__brand {
      display:flex;
      align-items:center;
      gap:9px;
      font-size:12px;
      font-weight:600;
      color:var(--baa-google-02-ink);
      width:100%;
      justify-content:center;
      position:relative;
      z-index:6;
    }

.baa-google-02 .baa-google-02__beesible-logo {
      width:92px;
      height:auto;
      display:block;
    }

.baa-google-02 .baa-google-02__google-logo {
      width:28px;
      height:28px;
      display:block;
      object-fit:contain;
      flex:0 0 auto;
    }

.baa-google-02 .baa-google-02__profile-head {
      padding:14px 14px 13px;
      border:1px solid var(--baa-google-02-line);
      border-radius:17px;
      background:var(--surface-raised,#fff);
      box-shadow:0 7px 20px rgba(48,46,51,.035);
      margin-bottom:12px;
    }

.baa-google-02 .baa-google-02__business-name {
      margin:0;
      font-size:15px;
      line-height:1.2;
      font-weight:600;
      letter-spacing:-.025em;
    }

.baa-google-02 .baa-google-02__business-meta {
      display:flex;
      align-items:center;
      gap:7px;
      margin-top:5px;
      color:var(--baa-google-02-muted);
      font-size:9.5px;
      line-height:1.3;
    }

.baa-google-02 .baa-google-02__dot {
      width:3px;
      height:3px;
      border-radius:50%;
      background:#C8C3CB;
    }

.baa-google-02 .baa-google-02__fields {
      display:flex;
      flex-direction:column;
      gap:9px;
    }

.baa-google-02 .baa-google-02__field {
      min-height:54px;
      padding:10px 12px;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:center;
      gap:12px;
      border:1px solid var(--baa-google-02-line);
      border-radius:var(--radius-lg,14px);
      background:var(--surface-raised,#fff);
      transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
    }

.baa-google-02 .baa-google-02__field.baa-google-02__editing {
      border-color:rgba(158,81,232,.42);
      box-shadow:0 0 0 3px rgba(158,81,232,.075);
      transform:translateY(-1px);
      background:var(--baa-google-02-purple-soft-2);
    }

.baa-google-02 .baa-google-02__field.baa-google-02__synced {
      border-color:#DCEEE4;
      background:#FCFEFD;
    }

.baa-google-02 .baa-google-02__label {
      display:block;
      margin-bottom:4px;
      color:var(--baa-google-02-muted);
      font-size:9px;
      font-weight:500;
      line-height:1;
    }

.baa-google-02 .baa-google-02__value {
      display:block;
      min-width:0;
      font-size:11.2px;
      line-height:1.25;
      font-weight:500;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      transition:opacity .18s ease, transform .18s ease, color .18s ease;
    }

.baa-google-02 .baa-google-02__value.baa-google-02__swap-out {
      opacity:0;
      transform:translateY(-4px);
    }

.baa-google-02 .baa-google-02__value.baa-google-02__swap-in {
      animation:baa-google-02-valueIn .32s cubic-bezier(.2,.8,.2,1) forwards;
    }

@keyframes baa-google-02-valueIn {
from { opacity:0; transform:translateY(5px); }

to { opacity:1; transform:translateY(0); }
}

.baa-google-02 .baa-google-02__mini-edit {
      min-width:48px;
      height:25px;
      padding:0 9px;
      display:grid;
      place-items:center;
      border:1px solid #DCD6E1;
      border-radius:var(--radius-pill,999px);
      color:var(--baa-google-02-muted);
      background:var(--surface-raised,#fff);
      font-size:8.5px;
      font-weight:600;
      transition:.22s ease;
    }

.baa-google-02 .baa-google-02__field.baa-google-02__editing .baa-google-02__mini-edit {
      border-color:rgba(158,81,232,.28);
      background:var(--baa-google-02-purple-soft);
      color:var(--baa-google-02-purple-dark);
    }

.baa-google-02 .baa-google-02__sync-check {
      width:23px;
      height:23px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--baa-google-02-green-soft);
      color:var(--baa-google-02-green);
      opacity:0;
      transform:scale(.65);
      transition:.28s cubic-bezier(.2,.85,.25,1.3);
    }

.baa-google-02 .baa-google-02__sync-check.baa-google-02__show {
      opacity:1;
      transform:scale(1);
    }

.baa-google-02 .baa-google-02__sync-check::before {
      content:"";
      width:7px;
      height:4px;
      border-left:1.8px solid currentColor;
      border-bottom:1.8px solid currentColor;
      transform:translateY(-1px) rotate(-45deg);
    }

.baa-google-02 .baa-google-02__photos {
      display:flex;
      align-items:center;
      gap:5px;
      min-height:26px;
    }

.baa-google-02 .baa-google-02__photo {
      width:32px;
      height:25px;
      border-radius:7px;
      border:1px solid rgba(80,66,92,.08);
      background:#F1EFF3;
      opacity:.45;
      transform:scale(.94);
      transition:.32s cubic-bezier(.2,.75,.25,1);
      overflow:hidden;
      position:relative;
    }

.baa-google-02 .baa-google-02__photo.baa-google-02__one { background:linear-gradient(145deg,#F1D7B5,#F6EEF7 60%,#D5F4F4); }

.baa-google-02 .baa-google-02__photo.baa-google-02__two { background:linear-gradient(145deg,#D7EEF3,#EEE1FA 58%,#F8E3C6); }

.baa-google-02 .baa-google-02__photo.baa-google-02__three { background:linear-gradient(145deg,#F7E4D3,#D9F2EC 60%,#E9DDF8); }

.baa-google-02 .baa-google-02__photo::after {
      content:"";
      position:absolute;
      left:6px;
      right:6px;
      bottom:5px;
      height:6px;
      border-radius:var(--radius-pill,999px) 999px 3px 3px;
      background:rgba(255,255,255,.68);
    }

.baa-google-02 .baa-google-02__photo.baa-google-02__active {
      opacity:1;
      transform:scale(1);
      box-shadow:0 4px 9px rgba(47,36,56,.06);
    }

/* En Google, las fotos nuevas no existen visualmente hasta sincronizarse */

.baa-google-02 [data-ref="right-photos"] .baa-google-02__photo:not(.baa-google-02__active) {
      opacity:0;
      transform:scale(.72);
    }

.baa-google-02 .baa-google-02__google-card {
      padding:14px;
      border:1px solid var(--baa-google-02-line);
      border-radius:18px;
      background:var(--surface-raised,#fff);
      box-shadow:0 7px 20px rgba(48,46,51,.035);
    }

.baa-google-02 .baa-google-02__google-card .baa-google-02__business-name { font-size:15px; }

.baa-google-02 .baa-google-02__rating {
      display:flex;
      align-items:center;
      gap:4px;
      margin-top:6px;
      color:var(--baa-google-02-muted);
      font-size:9px;
    }

.baa-google-02 .baa-google-02__stars { color:#F5B642; letter-spacing:-1px; font-size:10px; }

.baa-google-02 .baa-google-02__google-actions {
      display:flex;
      gap:6px;
      margin-top:10px;
    }

.baa-google-02 .baa-google-02__g-action {
      flex:1;
      height:27px;
      display:grid;
      place-items:center;
      border-radius:var(--radius-pill,999px);
      background:#F6F7F8;
      color:#5D5961;
      font-size:8px;
      font-weight:600;
    }

.baa-google-02 .baa-google-02__google-fields {
      margin-top:11px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }

.baa-google-02 .baa-google-02__google-field {
      min-height:45px;
      padding:8px 10px;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:center;
      gap:8px;
      border-top:1px solid #F0EDF2;
      background:var(--surface-raised,#fff);
      transition:background .3s ease;
    }

.baa-google-02 .baa-google-02__google-field:first-child { border-top:0; }

.baa-google-02 .baa-google-02__google-field.baa-google-02__flash {
      animation:baa-google-02-googleFlash .58s ease;
    }

@keyframes baa-google-02-googleFlash {
0% { background:var(--surface-raised,#fff); }

35% { background:var(--baa-google-02-cyan-soft); }

100% { background:var(--surface-raised,#fff); }
}

.baa-google-02 .baa-google-02__google-field .baa-google-02__label { margin-bottom:3px; }

.baa-google-02 .baa-google-02__google-field .baa-google-02__value { font-size:10.4px; }

.baa-google-02 .baa-google-02__sync-zone {
      padding:22px 12px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      background:linear-gradient(180deg,var(--surface-raised,#fff) 0%,#FDFBFE 100%);
      position:relative;
    }

.baa-google-02 .baa-google-02__beelma-orb {
      width:58px;
      height:58px;
      display:grid;
      place-items:center;
      margin-bottom:10px;
    }

.baa-google-02 .baa-google-02__beelma-orb img {
      width:44px;
      height:44px;
      display:block;
      object-fit:contain;
    }

.baa-google-02 .baa-google-02__sync-copy {
      min-height:30px;
      display:grid;
      place-items:center;
      text-align:center;
      color:var(--baa-google-02-muted);
      font-size:8.5px;
      font-weight:500;
      line-height:1.35;
      transition:color .2s ease;
    }

.baa-google-02 .baa-google-02__sync-copy.baa-google-02__active { color:var(--baa-google-02-purple-dark); }

.baa-google-02 .baa-google-02__sync-copy.baa-google-02__done { color:var(--baa-google-02-green); }

.baa-google-02 .baa-google-02__rail {
      width:100%;
      height:24px;
      margin:8px 0;
      position:relative;
      display:flex;
      align-items:center;
    }

.baa-google-02 .baa-google-02__rail::before {
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:50%;
      border-top:1.5px dashed #D9D2DE;
      transform:translateY(-50%);
    }

.baa-google-02 .baa-google-02__rail::after {
      content:"";
      position:absolute;
      right:-1px;
      top:50%;
      width:6px;
      height:6px;
      border-top:1.5px solid #BCAEC7;
      border-right:1.5px solid #BCAEC7;
      transform:translateY(-50%) rotate(45deg);
    }

.baa-google-02 .baa-google-02__pulse {
      width:9px;
      height:9px;
      position:absolute;
      left:1px;
      top:50%;
      border-radius:50%;
      background:var(--baa-google-02-purple);
      box-shadow:0 0 0 5px rgba(158,81,232,.11), 0 0 14px rgba(158,81,232,.22);
      opacity:0;
      transform:translate(0,-50%);
    }

.baa-google-02 .baa-google-02__pulse.baa-google-02__go {
      animation:baa-google-02-pulseAcross .58s cubic-bezier(.22,.76,.3,1) forwards;
    }

@keyframes baa-google-02-pulseAcross {
0% { left:1px; opacity:0; transform:translate(0,-50%) scale(.75); }

16% { opacity:1; }

82% { opacity:1; }

100% { left:calc(100% - 10px); opacity:0; transform:translate(0,-50%) scale(1); }
}

.baa-google-02 .baa-google-02__sync-pill {
      min-width:80px;
      height:28px;
      padding:0 10px;
      display:grid;
      place-items:center;
      border:1px solid var(--baa-google-02-line);
      border-radius:var(--radius-pill,999px);
      background:var(--surface-raised,#fff);
      color:var(--baa-google-02-muted);
      font-size:8.5px;
      font-weight:600;
      transition:.25s ease;
    }

.baa-google-02 .baa-google-02__sync-pill.baa-google-02__working {
      border-color:#E2D4EE;
      background:var(--baa-google-02-purple-soft);
      color:var(--baa-google-02-purple-dark);
    }

.baa-google-02 .baa-google-02__sync-pill.baa-google-02__done {
      border-color:#D7EADF;
      background:var(--baa-google-02-green-soft);
      color:var(--baa-google-02-green);
    }

@container (max-width:820px) {
.baa-google-02 .baa-google-02__stage { padding:0; min-height:0; }

.baa-google-02 .baa-google-02__demo {
        min-height:390px;
        grid-template-columns:repeat(2,minmax(0,1fr));
        border-radius:0;
      }

.baa-google-02 .baa-google-02__panel { padding:0; }

.baa-google-02 .baa-google-02__topline { margin-bottom:12px; }

.baa-google-02 .baa-google-02__profile-head { padding:11px; margin-bottom:8px; }

.baa-google-02 .baa-google-02__field { min-height:47px; padding:8px 9px; }

.baa-google-02 .baa-google-02__value { font-size:9.5px; }

.baa-google-02 .baa-google-02__label { font-size:8px; }

.baa-google-02 .baa-google-02__mini-edit { min-width:35px; padding:0 7px; font-size:7.5px; }

.baa-google-02 .baa-google-02__sync-zone { padding:16px 7px; }

.baa-google-02 .baa-google-02__beelma-orb { width:48px; height:48px; }

.baa-google-02 .baa-google-02__beelma-orb img { width:36px; height:36px; }

.baa-google-02 .baa-google-02__sync-copy { font-size:7px; }

.baa-google-02 .baa-google-02__sync-pill { min-width:62px; padding:0 7px; font-size:7px; }

.baa-google-02 .baa-google-02__google-card { padding:10px; }

.baa-google-02 .baa-google-02__google-actions { display:none; }

.baa-google-02 .baa-google-02__google-field { min-height:40px; padding:7px 6px; }

.baa-google-02 .baa-google-02__google-field .baa-google-02__value { font-size:9px; }

.baa-google-02 .baa-google-02__photo { width:26px; height:21px; }
}

/* V3 · two-column synchronization */

.baa-google-02 .baa-google-02__panel.baa-google-02__beesible {
      border-right:0;
    }

.baa-google-02 .baa-google-02__panel.baa-google-02__google {
      border-left:0;
    }

.baa-google-02 .baa-google-02__topline {
      position:relative;
      z-index:6;
      justify-content:center;
    }

.baa-google-02 .baa-google-02__brand {
      width:100%;
      justify-content:center;
    }

.baa-google-02 .baa-google-02__beesible-logo {
      width:96px;
      position:relative;
      z-index:7;
    }

.baa-google-02 .baa-google-02__google-logo {
      width:34px;
      height:34px;
      position:relative;
      z-index:7;
    }

.baa-google-02 .baa-google-02__sync-bridge {
      position:absolute;
      left:29%;
      right:29%;
      top:40px;
      height:34px;
      z-index:5;
      pointer-events:none;
      display:flex;
      align-items:center;
    }

.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__rail {
      width:100%;
      height:34px;
      margin:0;
      position:relative;
      display:flex;
      align-items:center;
    }

.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__rail::before {
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:50%;
      border-top:1.5px dashed #D9D2DE;
      transform:translateY(-50%);
    }

.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__rail::after {
      content:"";
      position:absolute;
      right:-1px;
      top:50%;
      width:5px;
      height:5px;
      border-top:1.2px solid #BCAEC7;
      border-right:1.2px solid #BCAEC7;
      transform:translateY(-50%) rotate(45deg);
    }

.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__pulse {
      width:30px;
      height:30px;
      position:absolute;
      left:0;
      top:50%;
      display:grid;
      place-items:center;
      border-radius:0;
      background:transparent;
      box-shadow:none;
      opacity:1;
      transform:translate(0,-50%) scale(0);
      transform-origin:center;
      z-index:2;
    }

.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__pulse img {
      width:30px;
      height:30px;
      display:block;
      object-fit:contain;
      filter:drop-shadow(0 3px 7px rgba(95,45,135,.16));
    }

.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__pulse.baa-google-02__go {
      animation:baa-google-02-beelmaAcross 2.4s linear forwards;
    }

@keyframes baa-google-02-beelmaAcross {
0% { left:0; transform:translate(0,-50%) scale(0); }

10% { left:calc(10% - 3px); transform:translate(0,-50%) scale(1); }

90% { left:calc(90% - 27px); transform:translate(0,-50%) scale(1); }

100% { left:calc(100% - 30px); transform:translate(0,-50%) scale(0); }
}

@container (max-width:820px) {
.baa-google-02 .baa-google-02__sync-bridge {
        left:31%;
        right:31%;
        top:27px;
        height:28px;
      }

.baa-google-02 .baa-google-02__beesible-logo { width:78px; }

.baa-google-02 .baa-google-02__google-logo { width:29px; height:29px; }

.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__rail { height:28px; }

.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__pulse,
.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__pulse img { width:25px; height:25px; }

@keyframes baa-google-02-beelmaAcross {
0% { left:0; transform:translate(0,-50%) scale(0); }

10% { left:calc(10% - 2.5px); transform:translate(0,-50%) scale(1); }

90% { left:calc(90% - 22.5px); transform:translate(0,-50%) scale(1); }

100% { left:calc(100% - 25px); transform:translate(0,-50%) scale(0); }
}
}

/* V4 · aligned brands + shorter centered bridge */

.baa-google-02 .baa-google-02__panel {
      justify-content:flex-start;
    }

.baa-google-02 .baa-google-02__topline {
      min-height:34px;
      height:34px;
      margin-bottom:18px;
    }

.baa-google-02 .baa-google-02__brand {
      min-height:34px;
      height:34px;
      align-items:center;
      justify-content:center;
    }

.baa-google-02 .baa-google-02__google-brand {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      white-space:nowrap;
    }

.baa-google-02 .baa-google-02__google-brand-text {
      font-size:14px;
      line-height:1;
      font-weight:600;
      color:var(--baa-google-02-ink);
    }

.baa-google-02 .baa-google-02__sync-bridge {
      left:34%;
      right:34%;
      top:26px;
      height:34px;
    }

@container (max-width:820px) {
.baa-google-02 .baa-google-02__sync-bridge {
        left:35%;
        right:35%;
        top:26px;
        height:28px;
      }

.baa-google-02 .baa-google-02__google-brand { gap:6px; }

.baa-google-02 .baa-google-02__google-brand-text { font-size:11px; }
}

/* V14 · equal and aligned content areas */

.baa-google-02 .baa-google-02__beesible-card-stack,
.baa-google-02 .baa-google-02__google-card {
      width:100%;
      min-height:0;
    }

.baa-google-02 .baa-google-02__beesible-card-stack {
      display:flex;
      flex-direction:column;
    }

.baa-google-02 .baa-google-02__beesible-card-stack .baa-google-02__fields {
      flex:1;
      display:grid;
      grid-template-rows:repeat(4,minmax(0,1fr));
    }

.baa-google-02 .baa-google-02__beesible-card-stack .baa-google-02__field {
      min-height:0;
      height:100%;
    }

.baa-google-02 .baa-google-02__google-card {
      display:flex;
      flex-direction:column;
    }

.baa-google-02 .baa-google-02__google-card .baa-google-02__google-fields {
      flex:1;
      display:grid;
      grid-template-rows:repeat(4,minmax(0,1fr));
    }

.baa-google-02 .baa-google-02__google-card .baa-google-02__google-field {
      min-height:0;
      height:100%;
    }

/* V15 · center the synchronization rail on the brand logos */

.baa-google-02 .baa-google-02__sync-bridge {
      top:17px;
      height:0;
    }

.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__rail {
      height:0;
    }

.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__rail::before,
.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__rail::after,
.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__pulse {
      top:0;
    }

@container (max-width:820px) {
.baa-google-02 .baa-google-02__sync-bridge {
        top:33px;
        height:0;
      }

.baa-google-02 .baa-google-02__sync-bridge .baa-google-02__rail {
        height:0;
      }
}

@media (prefers-reduced-motion:reduce) {
.baa-google-02 *,
.baa-google-02 *::before,
.baa-google-02 *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

.baa-google-02 { height:auto; min-width:0; width:100%; isolation:isolate; container-type:inline-size; line-height:1.5; font-weight:400; text-align:left; }
.baa-google-02 *, .baa-google-02 *::before, .baa-google-02 *::after { box-sizing:border-box; }
.baa-google-02 .baa-google-02__tag-strong, .baa-google-02 .baa-google-02__tag-b { font-weight:var(--font-weight-bold,600); }
.baa-google-02 .baa-google-02__tag-button { font-family:inherit; text-align:center; }

