@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Zilla+Slab:wght@400;500;600;700&display=swap');

:root{
  --obs-bg: #f7f1ed;
  --obs-bg-soft: #fcf9f6;
  --obs-white: #ffffff;
  --obs-ink: #15120f;
  --obs-muted: #6f6963;
  --obs-line: #e5ddd6;
  --obs-navy: #07255a;
  --obs-navy-2: #12284a;
  --obs-blue: #2f5da8;
  --obs-blue-soft: #eaf0f8;
  --obs-orange: #c69221;
  --obs-orange-soft: #fdece6;
  --obs-green: #21965a;
  --obs-red: #d95b50;
  --obs-display: 'Playfair Display', Georgia, serif;
  --obs-body: 'Zilla Slab', Georgia, serif;
  --obs-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --obs-pad: clamp(22px, 4vw, 68px);
  --obs-scroll: 0px;
  --obs-shape-right: -15vw; /* Cambia SOLO este valor para mover la figura */
}

html{ scroll-behavior: smooth; }
body.observatorio-page{
  margin: 0;
  overflow-x: hidden;
  background: var(--obs-bg);
  color: var(--obs-ink);
}
body.observatorio-page *,
body.observatorio-page *::before,
body.observatorio-page *::after{ box-sizing: border-box; }

/* HEADER */
.fpage-header{
  position: relative;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 34px var(--obs-pad) 20px;
  background: var(--obs-bg);
}

.fpage-logo{
  color: var(--obs-ink);
  text-decoration: none;
  font-family: var(--obs-display);
  font-size: clamp(36px, 3vw, 44px);
  font-weight: 500;
  line-height: 1;
}

.fpage-nav{
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 45px);
}

.fpage-nav > a{
  color: var(--obs-ink);
  text-decoration: none;
  font-family: var(--obs-body);
  font-size: 15px;
  transition: opacity .2s ease, color .2s ease;
}

.fpage-nav > a:hover{ color: var(--obs-orange); }

.fpage-nav .fpage-cta{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 6px 7px 6px 22px;
  border-radius: 999px;
  background: var(--obs-ink);
  color: white;
}

.fpage-nav .fpage-cta:hover{ color: white; }

.fpage-cta-badge{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--obs-orange);
}

.fpage-cta-badge::after{
  content: "→";
  font-family: var(--obs-ui);
  font-size: 16px;
}

/* HERO */
.obs-hero{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(500px, 38vw) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 2.6vw, 38px);
  min-height: clamp(760px, 61vw, 830px);
  padding: 12px var(--obs-pad) 24px;
  overflow: visible;
  background: var(--obs-bg);
}

.obs-hero::after{ display:none; }

.obs-text{
  position: relative;
  z-index: 5;
  max-width: 560px;
  margin-left: 0;
  left: -55px;
  padding-top: clamp(82px, 7.8vw, 104px);
}

.obs-eyebrow{
  margin: 0 0 28px;
  color: var(--obs-orange);
  font-family: var(--obs-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.obs-title{
  margin: 0;
  color: var(--obs-ink);
  font-family: var(--obs-display);
  font-size: clamp(58px, 5vw, 70px);
  font-weight: 500;
  line-height: 1.11;
  letter-spacing: -.035em;
}

.obs-underline{
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.obs-underline::after{
  content: "";
  position: absolute;
  left: 0;
  right: -2%;
  bottom: -.065em;
  height: .105em;
  border-radius: 999px;
  background: var(--obs-orange);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .9s cubic-bezier(.2,.78,.24,1) .5s;
}

.obs-hero.is-visible .obs-underline::after{ transform: scaleX(1); }

.obs-copy{
  max-width: 470px;
  margin: 40px 0 0;
  color: #3d3834;
  font-family: var(--obs-body);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
}

.obs-actions{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 24px;
  margin-top: 40px;
}

.obs-btn, .obs-demo{
  text-decoration: none;
  font-family: var(--obs-body);
  white-space: nowrap;
}

.obs-btn{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 59px;
  padding: 6px 7px 6px 24px;
  border-radius: 999px;
  background: var(--obs-ink);
  color: white;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(18,15,13,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}

.obs-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(18,15,13,.18);
}

.obs-btn-arrow{
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--obs-orange);
  font-family: var(--obs-ui);
  font-size: 16px;
}

.obs-demo{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 59px;
  padding: 6px 20px 6px 7px;
  border: 1px solid var(--obs-line);
  border-radius: 999px;
  background: rgba(255,255,255,.44);
  color: var(--obs-ink);
  font-size: 15px;
  transition: transform .25s ease, background .25s ease;
}

.obs-demo:hover{
  transform: translateY(-2px);
  background: white;
}

.obs-demo-icon{
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid #cfc4bc;
  border-radius: 50%;
  font-family: var(--obs-ui);
  font-size: 10px;
  padding-left: 2px;
}

.obs-features{
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(30px, 3vw, 52px);
  margin-top: 64px;
}

.obs-feature{
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.obs-feature-icon{
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border-radius: 50%;
  background: var(--obs-orange-soft);
  color: var(--obs-orange);
}

.obs-feature-icon svg{ width: 17px; height: 17px; }

.obs-feature p{
  margin: 0;
  color: #393430;
  font-family: var(--obs-body);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
}

.obs-enter{
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .85s cubic-bezier(.2,.78,.24,1) var(--delay, 0s),
    transform .85s cubic-bezier(.2,.78,.24,1) var(--delay, 0s);
}

.obs-media.obs-enter{ transform: translate3d(30px, 8px, 0) scale(.99); }
.obs-hero.is-visible .obs-enter{ opacity: 1; transform: none; }

/* PRODUCT MOCKUP */
.obs-media{
  position: relative;
  z-index: 2;
  min-width: 0;
  padding-top: 8px;
  margin-left: 0;
  margin-right: calc(var(--obs-pad) * -1);
}

.obs-stage{
  position: relative;
  min-height: clamp(715px, 56vw, 760px);
}

/*
  El SVG trae ~32% de espacio transparente del lado izquierdo.
  Por eso se desplaza hacia la izquierda: el AZUL real arranca justo
  donde comienza la columna de la plataforma, como en la referencia.
*/
.obs-shape{
  position: absolute;
  z-index: 0;
  top: 0;
  left: auto;
  right: 0;
  width: 148%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 24px 34px rgba(7,27,54,.12));
  transform: translateY(calc(var(--obs-scroll) * -.002));
}

.obs-screen{
  --rx: 0deg;
  --ry: 0deg;
  position: absolute;
  z-index: 2;

  /* La plataforma vive DENTRO de la forma azul. */
  top: 11.2%;
  left: 7.8%;
  right: -0.7%;
  bottom: -1.2%;

  display: grid;
  grid-template-columns: 52px 1fr;
  overflow: visible;

  /* La curva inferior izquierda acompaña la forma azul. */
  border-radius: 19px 19px 0 82px;
  background: linear-gradient(180deg, #fbfaf8 0%, #f4f1ee 100%);
  box-shadow:
    0 16px 38px rgba(7,27,54,.10),
    0 1px 7px rgba(7,27,54,.07);

  transform:
    translateY(calc(var(--obs-scroll) * -.010))
    rotateX(var(--rx))
    rotateY(var(--ry));

  transform-origin: center;
  transition: transform .25s ease-out;
}
.obs-screen::before{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(19,33,56,.07);
  border-radius: inherit;
  pointer-events: none;
}
.obs-screen-rail{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 18px 0;
  border-right: 1px solid #e9e6e2;
  background: #fbfbfb;
  border-radius: 19px 0 0 82px;
}
.obs-screen-rail > span:not(.obs-rail-mark){
  display: block;
  width: 14px;
  height: 14px;
  border: 1.5px solid #cad0d7;
  border-radius: 4px;
}
.obs-rail-mark{
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--obs-navy);
  font-family: var(--obs-display);
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.obs-screen-main{
  min-width: 0;
  padding: 18px 18px 20px;
}
.obs-screen-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.obs-screen-kicker{
  margin: 0 0 3px;
  color: #9aa3ae;
  font-family: var(--obs-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}
.obs-screen-top h3{
  margin: 0;
  color: #17263b;
  font-family: var(--obs-ui);
  font-size: clamp(19px, 1.55vw, 24px);
  font-weight: 650;
}
.obs-period{
  padding: 9px 13px;
  border: 1px solid #e1e4e8;
  border-radius: 999px;
  background: white;
  color: #6f7883;
  font-family: var(--obs-ui);
  font-size: 10px;
  white-space: nowrap;
}
.obs-screen-tabs{
  display: flex;
  gap: 18px;
  margin-top: 20px;
  border-bottom: 1px solid #e5e8ec;
  color: #8c96a2;
  font-family: var(--obs-ui);
  font-size: 10px;
}
.obs-screen-tabs span{
  position: relative;
  padding-bottom: 10px;
  white-space: nowrap;
}
.obs-screen-tabs .active{
  color: var(--obs-navy-2);
  font-weight: 700;
}
.obs-screen-tabs .active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--obs-blue);
}
.obs-kpis{
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
.obs-kpis article{
  position: relative;
  min-width: 0;
  padding: 16px 14px;
  border: 1px solid #eceef1;
  border-radius: 14px;
  background: white;
  box-shadow: 0 12px 28px rgba(35,56,85,.07);
}
.obs-kpis article:first-child{
  position: relative;
  z-index: 8;
  margin-left: -76px;
  transform: translateY(-1px);
  box-shadow: 0 20px 38px rgba(25,42,68,.15);
}
.obs-kpis span{
  display: block;
  overflow: hidden;
  color: #8c96a2;
  font-family: var(--obs-ui);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obs-kpis strong{
  display: block;
  margin-top: 10px;
  color: #142339;
  font-family: var(--obs-display);
  font-size: clamp(19px, 1.45vw, 24px);
  font-weight: 600;
}
.obs-kpis small{
  display: block;
  margin-top: 8px;
  font-family: var(--obs-ui);
  font-size: 8px;
  font-weight: 650;
}
.obs-kpis .positive{ color: var(--obs-green); }
.obs-kpis .negative{ color: var(--obs-red); }

.obs-dashboard-grid{
  display: grid;
  grid-template-columns: 1.28fr .84fr;
  gap: 12px;
  margin-top: 14px;
}
.obs-panel{
  min-width: 0;
  padding: 16px;
  border: 1px solid #e9ebee;
  border-radius: 14px;
  background: white;
}
.obs-panel-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.obs-panel-head small{
  display: block;
  color: #a0a8b2;
  font-family: var(--obs-ui);
  font-size: 8px;
  letter-spacing: .1em;
}
.obs-panel-head h4{
  margin: 3px 0 0;
  color: #1d2b3f;
  font-family: var(--obs-ui);
  font-size: 12px;
  font-weight: 650;
}
.obs-chart{
  position: relative;
  height: 172px;
  margin-top: 16px;
  overflow: hidden;
}
.obs-chart-grid{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, #edf0f3 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(to right, #f1f3f5 1px, transparent 1px) 0 0 / 20% 100%;
}
.obs-chart svg{
  position: absolute;
  inset: 8px 0 0;
  width: 100%;
  height: calc(100% - 8px);
}
.obs-chart-labels{
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  color: #9ca5af;
  font-family: var(--obs-ui);
  font-size: 7px;
}
.obs-donut-layout{
  display: grid;
  grid-template-columns: minmax(98px, 1fr) minmax(118px, 1.1fr);
  align-items: center;
  gap: 12px;
  min-height: 205px;
}
.obs-donut{
  position: relative;
  display: grid;
  place-items: center;
  width: min(138px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background:
    conic-gradient(
      #0e2d53 0 36%,
      #4975ae 36% 64%,
      #a7bbd1 64% 83%,
      #d7dee6 83% 100%
    );
}
.obs-donut::after{
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: white;
}
.obs-donut > div{
  position: relative;
  z-index: 1;
  text-align: center;
}
.obs-donut small{
  display: block;
  color: #a0a8b2;
  font-family: var(--obs-ui);
  font-size: 8px;
}
.obs-donut strong{
  display: block;
  margin-top: 2px;
  color: #18283d;
  font-family: var(--obs-display);
  font-size: 17px;
}
.obs-legend{
  display: grid;
  gap: 13px;
}
.obs-legend span{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  color: #687381;
  font-family: var(--obs-ui);
  font-size: 8px;
}
.obs-legend i{
  width: 7px;
  height: 7px;
  border-radius: 2px;
}
.obs-legend b{
  color: #495565;
  font-weight: 700;
}
.obs-legend .l1{ background:#0e2d53; }
.obs-legend .l2{ background:#4975ae; }
.obs-legend .l3{ background:#a7bbd1; }
.obs-legend .l4{ background:#d7dee6; }
.obs-orbit{
  position: absolute;
  display: block;
  border: 1px solid rgba(198,146,33,.22);
  border-radius: 50%;
  pointer-events: none;
}
.obs-orbit-a{
  width: 165px;
  height: 165px;
  right: -50px;
  top: -10px;
}
.obs-orbit-b{
  width: 60px;
  height: 60px;
  left: 3%;
  bottom: 4%;
}


/* REVEAL */
.reveal-up{
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .85s cubic-bezier(.2,.78,.24,1) var(--delay, 0s),
    transform .85s cubic-bezier(.2,.78,.24,1) var(--delay, 0s);
}
.reveal-up.is-visible{
  opacity: 1;
  transform: none;
}

/* CAPABILITIES */
.oc-row{
  position: relative;
  z-index: 5;
  padding: 14px var(--obs-pad) clamp(82px, 8vw, 125px);
  background: var(--obs-bg);
}
.oc-row-inner{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
  border: 1px solid rgba(229,221,214,.7);
  border-radius: 30px;
  background: rgba(255,255,255,.42);
  backdrop-filter: blur(10px);
}
.oc-row-item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  min-height: 162px;
  justify-content: center;
  border-right: 1px solid var(--obs-line);
}
.oc-row-item:last-child{ border-right: none; }
.oc-row-item::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--obs-orange);
  transform: translateX(-50%);
  transition: width .3s ease;
}
.oc-row-item:hover::after{ width: 44px; }
.oc-row-item .icon{ color: var(--obs-navy-2); }
.oc-row-item svg{ width: 31px; height: 31px; }
.oc-row-item p{
  margin: 0;
  color: var(--obs-ink);
  font-family: var(--obs-body);
  font-size: 18px;
}

/* OBSERVE */
.oc-observe{
  position: relative;
  padding: clamp(100px, 9vw, 150px) var(--obs-pad) clamp(120px, 10vw, 175px);
  overflow: hidden;
  background: #f2ede8;
}
.oc-observe::before{
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  left: -320px;
  bottom: -360px;
  border: 1px solid rgba(47,93,168,.10);
  border-radius: 50%;
}
.oc-observe-head{
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}
.oc-section-label{
  margin: 0 0 20px;
  color: var(--obs-orange);
  font-family: var(--obs-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
}
.oc-observe-head h2,
.oc-continuity-head h2{
  margin: 0;
  color: var(--obs-ink);
  font-family: var(--obs-display);
  font-size: clamp(48px, 5vw, 78px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.035em;
}
.oc-observe-head > p:last-child{
  max-width: 640px;
  margin: 28px auto 0;
  color: var(--obs-muted);
  font-family: var(--obs-body);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
}
.oc-observe-stage{
  position: relative;
  max-width: 1260px;
  margin: clamp(64px, 7vw, 100px) auto 0;
  perspective: 1500px;
}
.oc-observe-glow{
  position: absolute;
  inset: 8% 7% -4%;
  border-radius: 40%;
  background: radial-gradient(circle, rgba(47,93,168,.16), transparent 67%);
  filter: blur(28px);
}
.oc-observe-image-wrap{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: var(--obs-navy);
  box-shadow: 0 40px 80px rgba(24,37,56,.20);
  transform: rotateX(1.4deg) rotateY(-2.6deg);
  transition: transform .5s ease;
}
.oc-observe-stage:hover .oc-observe-image-wrap{
  transform: rotateX(0) rotateY(0) translateY(-4px);
}
.oc-observe-image{
  display: block;
  width: 100%;
  height: auto;
}
.oc-callout{
  position: absolute;
  z-index: 3;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  background: rgba(255,255,255,.80);
  color: var(--obs-navy);
  box-shadow: 0 12px 30px rgba(23,39,60,.10);
  backdrop-filter: blur(10px);
  font-family: var(--obs-body);
  font-size: 13px;
}
.oc-callout-one{ top: 16%; left: -15px; }
.oc-callout-two{ right: -12px; top: 40%; }
.oc-callout-three{ left: 9%; bottom: -18px; }

/* CONTINUITY */
.oc-continuity{
  padding: clamp(110px, 10vw, 165px) var(--obs-pad);
  background: var(--obs-navy);
  color: white;
}
.oc-continuity-head{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  column-gap: clamp(50px, 7vw, 110px);
  align-items: end;
  max-width: 1320px;
  margin: 0 auto;
}
.oc-continuity .oc-section-label{
  grid-column: 1 / -1;
  color: #f58a6b;
}
.oc-continuity-head h2{ color: white; }
.oc-continuity-head h2 span{ color: #f58a6b; }
.oc-continuity-head > p:last-child{
  margin: 0 0 7px;
  color: #c7d0db;
  font-family: var(--obs-body);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.58;
}
.oc-flow{
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  max-width: 1320px;
  margin: clamp(72px, 8vw, 110px) auto 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.oc-step{
  position: relative;
  min-height: 300px;
  padding: 36px 24px 28px 0;
  border-right: 1px solid rgba(255,255,255,.13);
}
.oc-step:not(:first-child){ padding-left: 24px; }
.oc-step:last-child{ border-right: 0; }
.oc-step::before{
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--obs-orange);
  box-shadow: 0 0 0 6px rgba(198,146,33,.12);
}
.oc-step:not(:first-child)::before{ left: 24px; }
.oc-step-number{
  color: #6f839d;
  font-family: var(--obs-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.oc-step-icon{
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: 40px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  background: rgba(255,255,255,.04);
  color: #f58a6b;
  font-family: var(--obs-ui);
  font-size: 22px;
}
.oc-step h3{
  margin: 23px 0 0;
  font-family: var(--obs-display);
  font-size: 28px;
  font-weight: 500;
}
.oc-step p{
  margin: 13px 0 0;
  color: #aebbc9;
  font-family: var(--obs-body);
  font-size: 15px;
  line-height: 1.55;
}
.oc-pills{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
  max-width: 1100px;
  margin: 62px auto 0;
}
.oc-pills span{
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: #d8e0e8;
  font-family: var(--obs-body);
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 1250px){
  .obs-hero{
    grid-template-columns: minmax(360px, 37vw) minmax(0,1fr);
    gap: 24px;
    min-height: 730px;
  }
  .obs-text{ padding-top: 52px; }
  .obs-title{ font-size: clamp(55px, 5.1vw, 65px); }
  .obs-actions{ gap: 12px; }
  .obs-demo{ padding-right: 15px; }
  .obs-features{ gap: 20px; }
  .obs-stage{ min-height: 690px; }
  .obs-shape{ left:auto; right:0; width:150%; }
  .obs-screen{ left:4%; right:2.4%; }
  .obs-kpis{ width:calc(100% + 88px); margin-left:-88px; }
  .obs-kpis article{ height:160px; }
  .obs-dashboard-grid{ margin-top:18px; }
  .obs-panel{ height:244px; }
  .obs-donut-layout{ grid-template-columns: 1fr; }
  .obs-donut{ width: 110px; }
  .obs-legend{ grid-template-columns: 1fr 1fr; gap:7px 8px; }
}

@media (max-width: 1050px){
  .fpage-header{ padding-top:24px; }
  .obs-hero{
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 0;
    padding-bottom: 56px;
  }
  .obs-text{
    max-width: 720px;
    margin-left: 0;
    left: 0;
    padding-top: 28px;
  }
  .obs-title{ font-size: clamp(54px, 8vw, 78px); }
  .obs-copy{ max-width: 560px; }
  .obs-features{ flex-wrap:wrap; }
  .obs-media{
    margin-top:20px;
    margin-left:0;
    margin-right:calc(var(--obs-pad) * -1);
  }
  .obs-stage{ min-height: 650px; }
  .obs-shape{ left:auto; right:0; width:145%; }
  .obs-screen{
    top:11.5%;
    left:4.5%;
    right:3.5%;
    bottom:1.2%;
    border-radius:18px 18px 0 64px;
  }
  .obs-screen-rail{ border-radius:18px 0 0 64px; }
  .obs-kpis{ width:calc(100% + 68px); margin-left:-68px; }
  .oc-row-inner{ grid-template-columns: repeat(3, 1fr); }
  .oc-row-item:nth-child(3){ border-right: 0; }
  .oc-row-item:nth-child(-n+3){ border-bottom: 1px solid var(--obs-line); }
  .oc-continuity-head{ grid-template-columns: 1fr; }
  .oc-continuity-head > p:last-child{ max-width: 620px; margin-top: 28px; }
  .oc-flow{
    grid-template-columns: repeat(2, 1fr);
    border-top: 0;
    gap: 1px;
    background: rgba(255,255,255,.11);
  }
  .oc-step, .oc-step:not(:first-child){
    min-height: 280px;
    padding: 32px;
    border: 0;
    background: var(--obs-navy);
  }
  .oc-step::before, .oc-step:not(:first-child)::before{ display: none; }
}

@media (max-width: 720px){
  :root{ --obs-pad: 20px; }
  .fpage-header{ padding-top:16px; padding-bottom:10px; }
  .fpage-nav > a:not(.fpage-cta){ display:none; }
  .fpage-logo{ font-size:32px; }
  .fpage-nav .fpage-cta{ min-height:45px; padding-left:17px; }
  .fpage-cta-badge{ width:33px; height:33px; }
  .obs-hero{ gap:22px; padding-bottom:48px; }
  .obs-text{ padding-top:16px; }
  .obs-eyebrow{ margin-bottom:22px; }
  .obs-title{ font-size:clamp(47px, 14vw, 64px); line-height:1.02; }
  .obs-copy{ margin-top:24px; font-size:18px; }
  .obs-actions{ align-items:stretch; flex-direction:column; }
  .obs-btn, .obs-demo{ justify-content:space-between; width:100%; }
  .obs-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:40px;
    gap:18px 20px;
  }
  .obs-feature p{ white-space:normal; }
  .obs-stage{ min-height: 455px; }
  .obs-media{ margin-right:-20px; }
  .obs-shape{ left:auto; right:0; width:175%; height:100%; }
  .obs-screen{
    top:11%;
    left:3.5%;
    right:2.5%;
    bottom:1%;
    grid-template-columns:40px 1fr;
    border-radius:14px 14px 0 44px;
  }
  .obs-screen-rail{
    gap:17px;
    padding-top:12px;
    border-radius:14px 0 0 44px;
  }
  .obs-rail-mark{ width:25px; height:25px; }
  .obs-rail-mark img{ width:23px; height:23px; }
  .obs-rail-icon{ width:20px; height:20px; }
  .obs-rail-icon svg{ width:14px; height:14px; }
  .obs-screen-main{ padding:12px 12px 10px; }
  .obs-screen-titlebar{ min-height:30px; }
  .obs-screen-titlebar h3{ font-size:10px; }
  .obs-period{ display:none; }
  .obs-screen-tabs{ gap:11px; overflow:hidden; font-size:7px; }
  .obs-screen-tabs span{ padding-bottom:8px; }
  .obs-screen-tabs span:last-child{ display:none; }
  .obs-kpis{
    grid-template-columns:repeat(2, 1fr);
    width:100%;
    margin:14px 0 0;
    gap:8px;
  }
  .obs-kpis article{ height:105px; padding:10px 9px; }
  .obs-kpis > article > span{ font-size:8px; }
  .obs-kpi-value{ margin-top:8px; gap:5px; }
  .obs-kpis strong{ font-size:15px; }
  .obs-kpis small{ font-size:6px; }
  .obs-sparkline{ left:10px; right:10px; bottom:9px; width:calc(100% - 20px); height:25px; }
  .obs-dashboard-grid{ grid-template-columns:1fr; margin-top:10px; }
  .obs-panel{ height:150px; padding:10px; }
  .obs-panel-donut{ display:none; }
  .obs-chart-with-axis{ grid-template-columns:28px 1fr; margin-top:8px; }
  .obs-y-axis{ height:80px; font-size:5px; }
  .obs-chart{ height:80px; }
  .obs-chart-labels{ margin-left:35px; font-size:5px; }

  .oc-row{ padding-bottom:80px; }
  .oc-row-inner{ grid-template-columns:repeat(2,1fr); border-radius:20px; }
  .oc-row-item{
    min-height:132px;
    border-right:1px solid var(--obs-line);
    border-bottom:1px solid var(--obs-line);
  }
  .oc-row-item:nth-child(2n){ border-right:0; }
  .oc-row-item:nth-last-child(-n+2){ border-bottom:0; }
  .oc-row-item:nth-child(3){ border-right:1px solid var(--obs-line); }
  .oc-row-item p{ font-size:16px; }
  .oc-observe{ padding-top:88px; padding-bottom:105px; }
  .oc-observe-head{ text-align:left; }
  .oc-observe-head h2,
  .oc-continuity-head h2{ font-size:clamp(44px, 12vw, 60px); }
  .oc-observe-head > p:last-child{ margin-left:0; }
  .oc-observe-stage{ margin-top:55px; }
  .oc-observe-image-wrap{ border-radius:14px; transform:none; }
  .oc-callout{ display:none; }
  .oc-continuity{ padding-top:92px; padding-bottom:95px; }
  .oc-flow{ grid-template-columns:1fr; }
  .oc-step, .oc-step:not(:first-child){ min-height:auto; padding:30px 26px 34px; }
  .oc-step-icon{ margin-top:25px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .obs-enter, .reveal-up{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .obs-underline::after{
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .obs-screen{
    transform: none !important;
    transition: none !important;
  }

  .obs-shape{
    transform: none !important;
  }
}


/* ===== AJUSTE: FIGURA AZUL HASTA LA ORILLA DERECHA ===== */
.obs-hero{
  overflow: visible;
}

.obs-media{
  overflow: visible;
  margin-right: calc(var(--obs-pad) * -1);
}

.obs-stage{
  overflow: visible;
}

.obs-shape{
  left: auto !important;
  right: 0 !important;
}

@media (max-width: 1050px){
  .obs-shape{
    left: auto !important;
    right: 0 !important;
  }
}

@media (max-width: 720px){
  .obs-shape{
    left: auto !important;
    right: 0 !important;
  }
}


/* ===== CORRECCION REAL: DESPLAZAR FIGURA HACIA EL VIEWPORT ===== */
/*
  right: 0 la estaba pegando al borde del .obs-stage,
  NO al borde de la pantalla. Por eso visualmente quedaba igual.
*/
.obs-shape{
  left: auto !important;
  right: var(--obs-shape-right) !important;
}

/* Permitimos que salga del stage sin recortarse. */
.obs-hero,
.obs-media,
.obs-stage{
  overflow: visible !important;
}

/* Evita barra horizontal si la figura rebasa unos pixeles el viewport. */
body.observatorio-page{
  overflow-x: clip;
}

@media (max-width: 1050px){
  .obs-shape{
    right: -6vw !important;
  }
}

@media (max-width: 720px){
  .obs-shape{
    right: -3vw !important;
  }
}


/* ===== IZQUIERDA HASTA LA MITAD REAL DEL VIEWPORT ===== */

@media (min-width: 1051px){

  .obs-hero{
    grid-template-columns: 50vw minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }

  .obs-text{
    width: calc(50vw - var(--obs-pad)) !important;
    max-width: none !important;
  }

  .obs-copy{
    width: 100% !important;
    max-width: 620px !important;
  }

  .obs-actions{
    width: 100% !important;
    max-width: 680px !important;
  }

  .obs-features{
    width: 100% !important;
    max-width: 680px !important;
    justify-content: space-between !important;
    gap: 18px !important;
  }

  .obs-feature{
    flex: 1 1 0 !important;
  }

  /* mantenemos la figura donde ya te gustó */
  .obs-shape{
    right: var(--obs-shape-right) !important;
  }
}


/* ===== CONTROL ÚNICO DE POSICIÓN DE LA FIGURA AZUL ===== */
/*
  MOVER HACIA EL CENTRO / IZQUIERDA:
  -15vw -> -12vw -> -10vw -> -5vw -> 0vw

  MOVER HACIA LA DERECHA:
  -15vw -> -18vw -> -20vw
*/
@media (min-width: 1051px){
  .obs-shape{
    left: auto !important;
    right: var(--obs-shape-right) !important;
  }
}


/* ===== PLATAFORMA DENTRO DE LA FORMA AZUL ===== */
/*
  IMPORTANTE:
  --obs-shape-right mueve TODO el conjunto (forma + plataforma).
  El usuario dejó este valor en -5vw.
*/
.obs-product{
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: var(--obs-shape-right);
  width: 100%;
  overflow: visible;
}

/* La forma ya no se mueve sola: ahora se mueve el conjunto completo. */
.obs-product > .obs-shape{
  left: auto !important;
  right: 0 !important;
  top: 0;
  width: 148% !important;
  height: 100% !important;
}

/* Restauramos la plataforma tal como estaba y la dejamos dentro del azul. */
.obs-product > .obs-screen{
  display: grid !important;
  top: 11.2% !important;
  left: 7.8% !important;
  right: -0.7% !important;
  bottom: -1.2% !important;
}

/* La plataforma puede sobresalir visualmente con sus cards sin ser recortada. */
.obs-product,
.obs-product > .obs-screen,
.obs-stage,
.obs-media,
.obs-hero{
  overflow: visible !important;
}

/* Evita una barra horizontal aunque el conjunto llegue al borde del viewport. */
body.observatorio-page{
  overflow-x: clip;
}

@media (max-width: 1250px){
  .obs-product > .obs-screen{
    top: 11% !important;
    left: 7.6% !important;
    right: -1.5% !important;
    bottom: -1% !important;
  }
}

@media (max-width: 1050px){
  .obs-product{
    right: -6vw;
  }

  .obs-product > .obs-shape{
    width: 145% !important;
  }

  .obs-product > .obs-screen{
    top: 10.5% !important;
    left: 7.5% !important;
    right: 1% !important;
    bottom: -1% !important;
  }
}

@media (max-width: 720px){
  .obs-product{
    right: -3vw;
  }

  .obs-product > .obs-shape{
    width: 175% !important;
  }
}


/* =========================================================
   AJUSTE — PLATAFORMA MÁS ANCHA Y MÁS ALTA
   La forma azul NO se toca.
   ========================================================= */

:root{
  --obs-platform-left: -18%;
  --obs-platform-right: 0%;
  --obs-platform-top: 5%;
  --obs-platform-bottom: 30%;
}

@media (min-width: 1051px){

  .obs-product > .obs-screen{
    display: grid !important;

    /* Más ancha: crece principalmente hacia la izquierda,
       aprovechando el espacio que ya existe dentro de la forma azul. */
    left: var(--obs-platform-left) !important;
    right: var(--obs-platform-right) !important;

    /* Más alta: ocupa mucho más del alto disponible de la figura. */
    top: var(--obs-platform-top) !important;
    bottom: var(--obs-platform-bottom) !important;

    /* No escalamos ni deformamos la interfaz. */
    width: auto !important;
    height: auto !important;
  }

  /* Conservamos exactamente la posición actual de la figura azul. */
  .obs-product{
    right: var(--obs-shape-right) !important;
  }

  .obs-product > .obs-shape{
    right: 0 !important;
  }
}

/* Tablet: crecimiento más moderado. */
@media (min-width: 721px) and (max-width: 1050px){
  .obs-product > .obs-screen{
    left: -8% !important;
    right: 1% !important;
    top: 6% !important;
    bottom: -5% !important;
  }
}


/* =========================================================
   CONTROL REAL DEL TAMAÑO DE LA FORMA AZUL
   NO usar scale(): el SVG ya tiene transform y reglas !important.
   Cambia SOLO estas variables.
   ========================================================= */

:root{
  --obs-blue-shape-width: 186%;
  --obs-blue-shape-height: 125%;
  --obs-blue-shape-top: -12.5%;
}

@media (min-width: 1051px){
  .obs-product > .obs-shape{
    left: auto !important;
    right: 0 !important;

    /* CRECIMIENTO REAL */
    width: var(--obs-blue-shape-width) !important;
    height: var(--obs-blue-shape-height) !important;
    top: var(--obs-blue-shape-top) !important;

    /* Conserva el comportamiento existente sin usar scale() */
    transform: translateY(calc(var(--obs-scroll) * -.002)) !important;
    transform-origin: right center !important;
  }
}


/* =========================================================
   POSICIÓN DE LA PLATAFORMA
   ========================================================= */

:root{
  --obs-platform-left: -60%;
  --obs-platform-right: 0%;
  --obs-platform-top: 8%;

  /* NUEVO: controla qué tan chaparra es */
  --obs-platform-scale-y: 1.4;
}

@media (min-width: 1051px){

  .obs-product > .obs-screen{

    left: var(--obs-platform-left) !important;
    right: var(--obs-platform-right) !important;

    /* ESTE NO CAMBIA */
    top: var(--obs-platform-top) !important;

    bottom: auto !important;

    transform:
      translateY(calc(var(--obs-scroll) * -.010))
      scaleY(var(--obs-platform-scale-y)) !important;

    /* CLAVE: se encoge hacia arriba, sin mover el borde superior */
    transform-origin: top center !important;
  }
}

@media (min-width: 721px) and (max-width: 1050px){

  .obs-product > .obs-screen{
    left: -10% !important;
    right: 1% !important;
    top: 8% !important;
  }
}

/* =========================================================
   DISEÑO FINAL — "ASÍ SE VE EL OBSERVATORIO" + CONTINUIDAD
   Replica la composición de la referencia del usuario.
   ========================================================= */

/* BLOQUE AZUL / OBSERVATORIO EN ACCIÓN */
.oc-observe{
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #06244c;
  border-radius: 30px 30px 0 0;
}

.oc-observe::before{
  display: none;
}

.oc-observe-shell{
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(42px, 4.5vw, 68px);
  width: 100%;
  min-height: 640px;
  padding: 102px 30px 82px clamp(54px, 4.5vw, 72px);
}

.oc-observe-copy{
  position: relative;
  z-index: 2;
  padding-top: 7px;
}

.oc-observe-copy h2{
  margin: 0;
  color: #fff;
  font-family: var(--obs-display);
  font-size: clamp(48px, 4.2vw, 60px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.035em;
}

.oc-observe-copy p{
  margin: 29px 0 0;
  color: rgba(255,255,255,.86);
  font-family: var(--obs-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
}

.oc-observe-image-wrap{
  position: relative;
  z-index: 1;
  align-self: start;
  width: min(100%, 1120px);
  margin: 12px 0 0 auto;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}

.oc-observe-stage:hover .oc-observe-image-wrap,
.oc-observe-image-wrap:hover{
  transform: none;
}

.oc-observe-image{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* BLOQUE CREMA / CONTINUIDAD */
.oc-continuity{
  position: relative;
  padding: 0;
  background: #f7f1ed;
  color: var(--obs-ink);
}

.oc-continuity-shell{
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  grid-template-areas:
    "intro flow"
    "pills pills";
  column-gap: 47px;
  row-gap: 62px;
  width: 100%;
  padding: 64px clamp(48px, 4.6vw, 72px) 92px;
}

.oc-continuity-intro{
  grid-area: intro;
}

.oc-continuity-intro h2{
  margin: 0;
  color: var(--obs-ink);
  font-family: var(--obs-display);
  font-size: clamp(43px, 3.8vw, 57px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}

.oc-continuity-intro h2 span{
  color: var(--obs-ink);
}

.oc-continuity-intro p{
  margin: 27px 0 0;
  color: #68615c;
  font-family: var(--obs-body);
  font-size: 17px;
  line-height: 1.52;
}

.oc-flow{
  grid-area: flow;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.oc-flow::before{
  content: "";
  position: absolute;
  z-index: 0;
  top: 44px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    #d9cec5 0 34px,
    transparent 34px 39px
  );
}

.oc-step,
.oc-step:not(:first-child){
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 0 10px;
  border: 0;
  background: transparent;
  text-align: center;
}

.oc-step::before,
.oc-step:not(:first-child)::before{
  display: none;
}

.oc-step-icon{
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto;
  border: 1px solid #e2d9d2;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  color: #393733;
  box-shadow: 0 6px 14px rgba(65,52,43,.025);
}

.oc-step-icon svg{
  width: 34px;
  height: 34px;
}

.oc-step h3{
  margin: 20px 0 0;
  color: #282421;
  font-family: var(--obs-display);
  font-size: clamp(16px, 1.34vw, 19px);
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.oc-step p{
  margin: 13px 0 0;
  color: #7b736d;
  font-family: var(--obs-body);
  font-size: 15px;
  line-height: 1.45;
}

.oc-pills{
  grid-area: pills;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: none;
  margin: 0;
}

.oc-pills span{
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 80px;
  padding: 14px 25px;
  border: 1px solid #e9e0da;
  border-radius: 15px;
  background: rgba(255,255,255,.34);
  color: #39332f;
  box-shadow: 0 7px 18px rgba(67,50,39,.025);
  font-family: var(--obs-display);
  font-size: 17px;
  font-weight: 500;
}

.oc-pills i{
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: #f5e8cc;
  color: #c69221;
  font-style: normal;
}

.oc-pills i svg{
  width: 18px;
  height: 18px;
}

/* TABLET */
@media (max-width: 1050px){
  .oc-observe{
    border-radius: 24px 24px 0 0;
  }

  .oc-observe-shell{
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    gap: 26px;
    min-height: auto;
    padding: 78px 24px 74px 34px;
  }

  .oc-observe-image-wrap{
    width: min(100%, 900px);
    margin-top: 8px;
  }

  .oc-observe-copy h2{
    font-size: clamp(42px, 5.5vw, 54px);
  }

  .oc-observe-copy p{
    font-size: 16px;
  }

  .oc-continuity-shell{
    grid-template-columns: 230px minmax(0, 1fr);
    column-gap: 32px;
    padding: 58px 34px 76px;
  }

  .oc-continuity-intro h2{
    font-size: 43px;
  }

  .oc-flow{
    grid-template-columns: repeat(5, minmax(125px, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
  }

  .oc-flow::-webkit-scrollbar{
    display: none;
  }

  .oc-flow::before{
    left: 63px;
    right: 63px;
  }

  .oc-step h3{
    font-size: 16px;
  }

  .oc-step p{
    font-size: 14px;
  }

  .oc-pills{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* MOBILE */
@media (max-width: 720px){
  .oc-observe{
    border-radius: 20px 20px 0 0;
  }

  .oc-observe-shell{
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 62px 20px 54px;
  }

  .oc-observe-copy{
    padding-top: 0;
  }

  .oc-observe-copy h2{
    font-size: clamp(44px, 13vw, 58px);
  }

  .oc-observe-copy p{
    margin-top: 22px;
    font-size: 17px;
  }

  .oc-observe-image-wrap{
    width: 100%;
    margin: 0;
  }

  .oc-continuity-shell{
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "flow"
      "pills";
    row-gap: 44px;
    padding: 56px 20px 70px;
  }

  .oc-continuity-intro h2{
    font-size: clamp(44px, 12vw, 56px);
  }

  .oc-continuity-intro p{
    font-size: 16px;
  }

  .oc-flow{
    grid-template-columns: 1fr;
    gap: 28px;
    overflow: visible;
  }

  .oc-flow::before{
    top: 43px;
    bottom: 43px;
    left: 43px;
    right: auto;
    width: 1px;
    height: auto;
    background: repeating-linear-gradient(
      to bottom,
      #d9cec5 0 28px,
      transparent 28px 34px
    );
  }

  .oc-step,
  .oc-step:not(:first-child){
    display: grid;
    grid-template-columns: 86px 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    padding: 0;
    text-align: left;
  }

  .oc-step-icon{
    grid-row: 1 / span 2;
    width: 86px;
    height: 86px;
    margin: 0;
  }

  .oc-step h3{
    align-self: end;
    margin: 0 0 5px;
    font-size: 18px;
    white-space: normal;
  }

  .oc-step p{
    align-self: start;
    margin: 0;
    font-size: 15px;
  }

  .oc-pills{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .oc-pills span{
    min-height: 72px;
    padding: 13px 18px;
    font-size: 16px;
  }
}


/* =========================================================
   HERO v2 — observatorio inspirado en la referencia del usuario
   ========================================================= */

:root{
  --obs-gold: #c7a25a;
  --obs-gold-2: #b58a3f;
  --obs-gold-soft: #f3e8d2;
  --obs-gold-line: #e7d5b4;
  --obs-orange: var(--obs-gold);
  --obs-orange-soft: var(--obs-gold-soft);
}

.obs-hero{
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(34px, 4vw, 54px) !important;
  min-height: auto !important;
  padding: 8px var(--obs-pad) 18px !important;
  background: var(--obs-bg) !important;
}

.obs-text{
  left: 0 !important;
  max-width: 390px !important;
  padding-top: clamp(52px, 5.4vw, 76px) !important;
}

.obs-eyebrow{
  margin-bottom: 22px !important;
  color: var(--obs-gold-2) !important;
  letter-spacing: .12em !important;
}

.obs-title{
  font-size: clamp(62px, 5.5vw, 78px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}

.obs-underline::after{
  bottom: -.03em !important;
  height: .09em !important;
  background: var(--obs-gold) !important;
}

.obs-copy{
  max-width: 360px !important;
  margin-top: 26px !important;
  color: #5f5a56 !important;
  font-size: clamp(18px, 1.4vw, 21px) !important;
}

.obs-actions{
  gap: 16px !important;
  margin-top: 34px !important;
}

.obs-btn{
  background: #141517 !important;
  box-shadow: 0 14px 32px rgba(14, 16, 18, .12) !important;
}

.obs-btn-arrow{
  background: linear-gradient(180deg, #d6b674 0%, #b88938 100%) !important;
  color: #fff !important;
}

.obs-demo{
  border-color: #e8ddd0 !important;
  background: rgba(255,255,255,.78) !important;
}

.obs-demo-icon{
  border-color: #d9cab7 !important;
}

.obs-features{ display: none !important; }

.obs-media{
  margin-right: 0 !important;
  padding-top: 0 !important;
}

.obs-hero-board{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
  border: 1px solid #efe7de;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(245,240,235,.92) 100%);
  box-shadow: 0 24px 55px rgba(25, 32, 44, .06);
}

.obs-hero-card{
  min-width: 0;
  padding: 18px 18px 16px;
  border: 1px solid #ece4dc;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 26px rgba(33, 40, 51, .05);
}

.obs-card-head h3{
  margin: 0;
  color: #212224;
  font-family: var(--obs-ui);
  font-size: 15px;
  font-weight: 650;
}

.obs-card-head h3 span{
  color: #8d877f;
  font-weight: 600;
}

.obs-card-chart{ grid-column: 1 / span 4; }
.obs-card-kpi{ grid-column: 5 / span 2; }
.obs-card-device{ grid-column: 7 / span 6; padding: 12px 12px 0; display: flex; align-items: end; }
.obs-card-donut{ grid-column: 1 / span 4; }
.obs-card-reports{ grid-column: 5 / span 3; }
.obs-card-activity{ grid-column: 8 / span 3; }
.obs-card-users{ grid-column: 11 / span 2; }

.obs-chart-large{
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 10px;
  margin-top: 14px;
}

.obs-chart-ylabels{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0 2px;
  color: #a09b94;
  font-family: var(--obs-ui);
  font-size: 11px;
}

.obs-chart-canvas{
  position: relative;
  height: 170px;
}

.obs-chart-canvas .obs-chart-grid{
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(to bottom, #eee8e0 1px, transparent 1px) 0 0 / 100% 20%,
    linear-gradient(to right, #f2ece4 1px, transparent 1px) 0 0 / 20% 100%;
}

.obs-chart-canvas svg{
  position: absolute;
  inset: 6px 0 4px;
  width: 100%;
  height: calc(100% - 10px);
}

.obs-chart-xlabels{
  display: flex;
  justify-content: space-between;
  padding-left: 62px;
  margin-top: 8px;
  color: #948f88;
  font-family: var(--obs-ui);
  font-size: 11px;
}

.obs-card-kpi{
  display: flex;
  flex-direction: column;
}

.obs-kpi-number{
  display: block;
  margin-top: 18px;
  color: #161616;
  font-family: var(--obs-display);
  font-size: clamp(34px, 2.6vw, 50px);
  font-weight: 600;
  line-height: 1;
}

.obs-kpi-trend,
.obs-users-trend{
  margin: 10px 0 0;
  color: #6f8b54;
  font-family: var(--obs-ui);
  font-size: 12px;
  font-weight: 600;
}

.obs-kpi-spark{
  margin-top: auto;
  padding-top: 20px;
}

.obs-kpi-spark svg{
  display: block;
  width: 100%;
  height: 66px;
}

.obs-device{
  width: 100%;
}

.obs-device-screen{
  position: relative;
  min-height: 212px;
  border: 6px solid #181818;
  border-bottom-width: 9px;
  border-radius: 14px 14px 5px 5px;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef2f5 100%);
  overflow: hidden;
}

.obs-device-notch{
  position: absolute;
  top: 0;
  left: 50%;
  width: 82px;
  height: 14px;
  border-radius: 0 0 10px 10px;
  background: #181818;
  transform: translateX(-50%);
}

.obs-device-rail{
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.obs-device-rail .dot{
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #e8edf1;
  border: 1px solid #dfe5ea;
}

.obs-device-rail .dot.active{
  background: linear-gradient(180deg, #fff7e5 0%, #efe0bc 100%);
  border-color: #ddc38f;
}

.obs-device-canvas{
  position: absolute;
  inset: 0 0 0 52px;
  background:
    radial-gradient(circle at 72% 30%, rgba(199,162,90,.26), transparent 24%),
    radial-gradient(circle at 80% 58%, rgba(10,30,66,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(243,246,248,.96) 100%);
}

.obs-device-glow{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,27,48,.03) 0 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(rgba(15,27,48,.03) 0 1px, transparent 1px) 0 0 / 100% 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.16), transparent 72%);
}

.obs-device-base{
  width: 104%;
  height: 13px;
  margin-left: -2%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #d3d7db 0%, #a6adb5 100%);
  box-shadow: 0 8px 10px rgba(0,0,0,.12);
}

.obs-donut-hero-layout{
  display: grid;
  grid-template-columns: 152px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  min-height: 154px;
  margin-top: 10px;
}

.obs-donut-hero{
  position: relative;
  width: 146px;
  height: 146px;
  border-radius: 50%;
  background: conic-gradient(
    var(--obs-navy) 0 39%,
    #355c97 39% 67%,
    #8ca2c3 67% 86%,
    #dde3eb 86% 100%
  );
}

.obs-donut-hero::after{
  content: "";
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: white;
}

.obs-donut-hero > div{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 1;
}

.obs-donut-hero small{
  display: block;
  color: #a49c91;
  font-family: var(--obs-ui);
  font-size: 11px;
}

.obs-donut-hero strong{
  display: block;
  margin-top: 4px;
  color: #1a1f28;
  font-family: var(--obs-display);
  font-size: 32px;
  font-weight: 600;
}

.obs-donut-legend{
  display: grid;
  gap: 11px;
}

.obs-donut-legend span{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: #64605a;
  font-family: var(--obs-ui);
  font-size: 12px;
}

.obs-donut-legend i{
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.obs-donut-legend .c1{ background: var(--obs-navy); }
.obs-donut-legend .c2{ background: #355c97; }
.obs-donut-legend .c3{ background: #8ca2c3; }
.obs-donut-legend .c4{ background: #dde3eb; }
.obs-donut-legend b{ color: #26282c; }

.obs-mini-list{
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.obs-mini-list li{
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 10px;
  align-items: start;
}

.obs-mini-list b{
  display: block;
  color: #22252b;
  font-family: var(--obs-ui);
  font-size: 12px;
  font-weight: 600;
}

.obs-mini-list small{
  display: block;
  margin-top: 4px;
  color: #969087;
  font-family: var(--obs-ui);
  font-size: 11px;
}

.obs-mini-badge{
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #eef2f6;
  position: relative;
}

.obs-mini-badge::after{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 3px;
  border: 1.5px solid #90a0b3;
}

.obs-mini-badge.file{ background: #edf0f7; }
.obs-mini-badge.file::after{ border-color: #7f93ae; }
.obs-mini-badge.sheet{ background: #f5ebd6; }
.obs-mini-badge.sheet::after{ border-color: #c1a060; }
.obs-mini-badge.doc{ background: #edf2ef; }
.obs-mini-badge.doc::after{ border-color: #8ea793; }
.obs-mini-badge.blue{ background: #edf0f7; }
.obs-mini-badge.blue::after{ border-color: #6e86ac; border-radius: 999px; }
.obs-mini-badge.gold{ background: #f6eedf; }
.obs-mini-badge.gold::after{ border-color: #c7a25a; border-radius: 999px; }
.obs-mini-badge.soft{ background: #f4f1ec; }
.obs-mini-badge.soft::after{ border-color: #b7ada1; border-radius: 999px; }

.obs-card-link{
  display: inline-block;
  margin-top: 14px;
  color: #48689b;
  text-decoration: none;
  font-family: var(--obs-ui);
  font-size: 12px;
  font-weight: 600;
}

.obs-users-number{
  display: block;
  margin-top: 18px;
  color: #151515;
  font-family: var(--obs-display);
  font-size: clamp(38px, 3vw, 52px);
  font-weight: 600;
  line-height: 1;
}

.obs-user-avatars{
  display: flex;
  align-items: center;
  margin-top: 18px;
}

.obs-user-avatars span,
.obs-user-avatars em{
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(18,24,32,.08);
}

.obs-user-avatars span:first-child{ margin-left: 0; }
.obs-user-avatars span:nth-child(1){ background: linear-gradient(180deg, #223b62, #4a6588); }
.obs-user-avatars span:nth-child(2){ background: linear-gradient(180deg, #d8bb7d, #bc9453); }
.obs-user-avatars span:nth-child(3){ background: linear-gradient(180deg, #8fa4c0, #637894); }
.obs-user-avatars span:nth-child(4){ background: linear-gradient(180deg, #405274, #24334f); }
.obs-user-avatars span:nth-child(5){ background: linear-gradient(180deg, #e4d5b3, #bfa064); }
.obs-user-avatars em{
  background: #f2f1ee;
  color: #6f6860;
  font-family: var(--obs-ui);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

.oc-row-item::after{ background: var(--obs-gold) !important; }

@media (max-width: 1250px){
  .obs-hero{
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .obs-title{ font-size: clamp(54px, 5vw, 68px) !important; }

  .obs-hero-board{
    gap: 14px;
    padding: 16px;
  }

  .obs-card-chart{ grid-column: 1 / span 5; }
  .obs-card-kpi{ grid-column: 6 / span 3; }
  .obs-card-device{ grid-column: 9 / span 4; }
  .obs-card-donut{ grid-column: 1 / span 5; }
  .obs-card-reports{ grid-column: 6 / span 3; }
  .obs-card-activity{ grid-column: 9 / span 2; }
  .obs-card-users{ grid-column: 11 / span 2; }

  .obs-donut-hero-layout{ grid-template-columns: 132px minmax(0,1fr); }
  .obs-donut-hero{ width: 126px; height: 126px; }
}

@media (max-width: 1050px){
  .obs-hero{
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding-bottom: 10px !important;
  }

  .obs-text{
    max-width: 540px !important;
    padding-top: 28px !important;
  }

  .obs-copy{ max-width: 470px !important; }

  .obs-hero-board{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .obs-card-chart,
  .obs-card-kpi,
  .obs-card-device,
  .obs-card-donut,
  .obs-card-reports,
  .obs-card-activity,
  .obs-card-users{ grid-column: auto !important; }

  .obs-card-device{
    min-height: 260px;
  }

  .obs-card-users{
    min-height: 180px;
  }
}

@media (max-width: 720px){
  .obs-title{ font-size: clamp(47px, 13vw, 62px) !important; }
  .obs-copy{ font-size: 18px !important; }
  .obs-actions{ flex-direction: column !important; align-items: stretch !important; }
  .obs-btn, .obs-demo{ width: 100% !important; justify-content: space-between !important; }
  .obs-hero-board{
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .obs-chart-large{
    grid-template-columns: 40px minmax(0,1fr);
  }

  .obs-chart-ylabels,
  .obs-chart-xlabels{
    font-size: 10px;
  }

  .obs-chart-xlabels{ padding-left: 50px; }

  .obs-donut-hero-layout{
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .obs-donut-legend{ width: 100%; }

  .obs-device-screen{ min-height: 200px; }
}

/* =========================================================
   AJUSTE — HERO MÁS ABIERTO A IZQUIERDA Y DERECHA
   Solo modifica el ancho útil de la primera sección.
   ========================================================= */

@media (min-width: 1051px){
  .obs-hero{
    grid-template-columns: minmax(360px, 390px) minmax(0, 1fr) !important;
    gap: clamp(12px, 1.4vw, 22px) !important;
    padding-left: var(--obs-pad) !important;
    padding-right: var(--obs-pad) !important;
  }

  .obs-text{
    justify-self: start !important;
    width: 100% !important;
    max-width: 390px !important;
    margin-left: 0 !important;
  }

  .obs-media{
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .obs-hero-board{
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   FIX DEFINITIVO — HERO A LOS MISMOS MÁRGENES DEL HEADER
   site.css tenía max-width:1360px + margin:auto en .obs-hero.
   Esto lo elimina para usar todo el ancho real del viewport.
   ========================================================= */
@media (min-width: 1051px){
  .observatorio-page .obs-hero{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--obs-pad) !important;
    padding-right: var(--obs-pad) !important;
    grid-template-columns: minmax(360px, 390px) minmax(0, 1fr) !important;
    column-gap: clamp(18px, 1.5vw, 26px) !important;
  }

  .observatorio-page .obs-text{
    left: 0 !important;
    margin-left: 0 !important;
    justify-self: start !important;
  }

  .observatorio-page .obs-media{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: stretch !important;
  }

  .observatorio-page .obs-hero-board{
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
  }
}


/* =========================================================
   AJUSTE DE CARDS — limpieza visual del hero
   ========================================================= */

@media (min-width: 1051px){
  .obs-hero-board{
    grid-template-columns: 1.32fr .76fr 1.82fr .76fr .76fr .72fr !important;
    grid-auto-rows: minmax(158px, auto);
    gap: 18px !important;
    align-items: stretch;
  }

  .obs-card-chart{ grid-column: 1; grid-row: 1; }
  .obs-card-kpi{ grid-column: 2; grid-row: 1; }
  .obs-card-device{ grid-column: 3 / span 3; grid-row: 1; }

  .obs-card-donut{ grid-column: 1; grid-row: 2; }
  .obs-card-reports{ grid-column: 2 / span 2; grid-row: 2; }
  .obs-card-activity{ grid-column: 4 / span 2; grid-row: 2; }
  .obs-card-users{ grid-column: 6; grid-row: 2; }
}

.obs-hero-card{
  padding: 18px 18px 18px !important;
  border-radius: 22px !important;
}

.obs-card-chart{
  min-height: 256px;
}

.obs-card-kpi{
  min-height: 256px;
  justify-content: flex-start;
}

.obs-card-device{
  min-height: 256px;
  padding: 16px !important;
}

.obs-card-donut,
.obs-card-reports,
.obs-card-activity,
.obs-card-users{
  min-height: 228px;
}

.obs-card-head h3{
  font-size: 14px !important;
  line-height: 1.18;
}

.obs-chart-large{
  grid-template-columns: 46px minmax(0,1fr) !important;
  gap: 14px !important;
  margin-top: 12px !important;
}

.obs-chart-ylabels{
  font-size: 10px !important;
  padding: 8px 0 8px !important;
}

.obs-chart-canvas{
  height: 182px !important;
}

.obs-chart-xlabels{
  padding-left: 60px !important;
  font-size: 10px !important;
}

.obs-kpi-number{
  font-size: clamp(30px, 2.2vw, 46px) !important;
  margin-top: 14px !important;
}

.obs-kpi-trend{
  font-size: 11px !important;
  line-height: 1.35;
  max-width: 110px;
}

.obs-kpi-spark{
  padding-top: 16px !important;
}

.obs-kpi-spark svg{
  height: 56px !important;
}

.obs-donut-hero-layout{
  grid-template-columns: 1fr !important;
  justify-items: center;
  align-content: start;
  gap: 14px !important;
  min-height: 0 !important;
  margin-top: 14px !important;
}

.obs-donut-hero{
  width: 136px !important;
  height: 136px !important;
}

.obs-donut-hero strong{
  font-size: 26px !important;
}

.obs-donut-legend{
  width: 100%;
  gap: 8px !important;
}

.obs-donut-legend span{
  font-size: 11px !important;
  grid-template-columns: auto 1fr auto !important;
}

.obs-donut-legend b{
  min-width: 34px;
  text-align: right;
}

.obs-mini-list{
  gap: 13px !important;
  margin-top: 16px !important;
}

.obs-mini-list li{
  grid-template-columns: 22px minmax(0,1fr) !important;
  gap: 10px !important;
}

.obs-mini-list b{
  font-size: 11px !important;
  line-height: 1.25;
}

.obs-mini-list small{
  font-size: 10px !important;
  line-height: 1.25;
}

.obs-mini-badge{
  width: 22px !important;
  height: 22px !important;
}

.obs-card-link{
  margin-top: 12px !important;
  font-size: 11px !important;
}

.obs-card-users{
  display: grid;
  place-items: center;
  padding: 14px !important;
}

.obs-card-logo-wrap{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.obs-card-logo{
  display: block;
  width: min(86px, 72%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(7,37,90,.10));
}

.obs-device{
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  gap: 10px;
}

.obs-device-image{
  display: block;
  width: min(100%, 560px);
  max-height: 174px;
  object-fit: contain;
}

.obs-device-brand{
  display: grid;
  place-items: center;
  width: 100%;
}

.obs-device-brand-icon{
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: .92;
}

@media (max-width: 1250px){
  .obs-hero-board{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
  }

  .obs-card-chart,
  .obs-card-kpi,
  .obs-card-device,
  .obs-card-donut,
  .obs-card-reports,
  .obs-card-activity,
  .obs-card-users{
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .obs-card-device,
  .obs-card-chart,
  .obs-card-kpi{
    min-height: 240px;
  }
}

@media (max-width: 720px){
  .obs-hero-board{
    grid-template-columns: 1fr !important;
  }

  .obs-card-chart,
  .obs-card-kpi,
  .obs-card-device,
  .obs-card-donut,
  .obs-card-reports,
  .obs-card-activity,
  .obs-card-users{
    min-height: auto;
  }

  .obs-device-image{
    max-height: 150px;
  }
}


/* =========================================================
   CARDS v4 — proporciones solicitadas
   Fila 1: gráfica 30% / ingresos ~22% / laptop resto
   Fila 2: ingresos por área 40% / reportes / actividad / logo
   ========================================================= */

@media (min-width: 1251px){
  .observatorio-page .obs-hero-board{
    display: grid !important;
    grid-template-columns: repeat(100, minmax(0, 1fr)) !important;
    grid-template-rows: 238px 224px !important;
    column-gap: 0 !important;
    row-gap: 18px !important;
    align-items: stretch !important;
  }

  /* Fila superior */
  .observatorio-page .obs-card-chart{
    grid-column: 1 / 31 !important;
    grid-row: 1 !important;
    margin-right: 9px;
  }

  .observatorio-page .obs-card-kpi{
    grid-column: 31 / 53 !important;
    grid-row: 1 !important;
    margin-left: 9px;
    margin-right: 9px;
  }

  .observatorio-page .obs-card-device{
    grid-column: 53 / 101 !important;
    grid-row: 1 !important;
    margin-left: 9px;
  }

  /* Fila inferior */
  .observatorio-page .obs-card-donut{
    grid-column: 1 / 41 !important;
    grid-row: 2 !important;
    margin-right: 9px;
  }

  .observatorio-page .obs-card-reports{
    grid-column: 41 / 66 !important;
    grid-row: 2 !important;
    margin-left: 9px;
    margin-right: 9px;
  }

  .observatorio-page .obs-card-activity{
    grid-column: 66 / 88 !important;
    grid-row: 2 !important;
    margin-left: 9px;
    margin-right: 9px;
  }

  .observatorio-page .obs-card-users{
    grid-column: 88 / 101 !important;
    grid-row: 2 !important;
    margin-left: 9px;
  }
}

/* Alturas limpias: ya no dejamos que el contenido infle las tarjetas */
.obs-card-chart,
.obs-card-kpi,
.obs-card-device,
.obs-card-donut,
.obs-card-reports,
.obs-card-activity,
.obs-card-users{
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden;
}

/* ---------- Gráfica de ingresos ---------- */
.obs-card-chart{
  padding: 16px 18px 14px !important;
}

.obs-card-chart .obs-card-head h3{
  font-size: 14px !important;
  white-space: nowrap;
}

.obs-chart-large{
  grid-template-columns: 42px minmax(0,1fr) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.obs-chart-canvas{
  height: 150px !important;
}

.obs-chart-ylabels{
  font-size: 9px !important;
  padding: 5px 0 4px !important;
}

.obs-chart-xlabels{
  padding-left: 52px !important;
  margin-top: 5px !important;
  font-size: 9px !important;
  gap: 8px;
}

/* ---------- KPI Ingresos ---------- */
.obs-card-kpi{
  padding: 16px !important;
}

.obs-card-kpi .obs-card-head h3{
  font-size: 14px !important;
}

.obs-kpi-number{
  margin-top: 12px !important;
  font-size: clamp(31px, 2.45vw, 44px) !important;
  white-space: nowrap;
}

.obs-kpi-trend{
  max-width: 135px !important;
  margin-top: 8px !important;
  font-size: 10px !important;
  line-height: 1.28 !important;
}

.obs-kpi-spark{
  margin-top: auto !important;
  padding-top: 8px !important;
}

.obs-kpi-spark svg{
  height: 44px !important;
}

/* ---------- Laptop ---------- */
.obs-card-device{
  display: grid !important;
  place-items: center !important;
  padding: 14px 22px !important;
}

.obs-device{
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
}

.obs-device-image{
  width: min(78%, 390px) !important;
  max-width: 390px !important;
  max-height: 180px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* El card de laptop NO lleva logo. */
.obs-device-brand,
.obs-device-brand-icon{
  display: none !important;
}

/* ---------- Ingresos por área: 40% de la fila ---------- */
.obs-card-donut{
  padding: 16px 18px !important;
}

.obs-card-donut .obs-card-head h3{
  font-size: 14px !important;
}

.obs-donut-hero-layout{
  display: grid !important;
  grid-template-columns: minmax(116px, .92fr) minmax(150px, 1.08fr) !important;
  justify-items: stretch !important;
  align-items: center !important;
  align-content: center !important;
  gap: clamp(14px, 1.5vw, 24px) !important;
  width: 100% !important;
  margin-top: 10px !important;
}

.obs-donut-hero{
  width: min(128px, 100%) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  justify-self: center !important;
}

.obs-donut-hero strong{
  font-size: 23px !important;
}

.obs-donut-hero small{
  font-size: 9px !important;
}

.obs-donut-legend{
  width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
}

.obs-donut-legend span{
  grid-template-columns: 9px minmax(0,1fr) 30px !important;
  gap: 7px !important;
  min-width: 0 !important;
  font-size: 10px !important;
  white-space: nowrap;
}

.obs-donut-legend i{
  width: 8px !important;
  height: 8px !important;
}

.obs-donut-legend b{
  min-width: 30px !important;
  font-size: 10px !important;
  text-align: right;
}

/* ---------- Reportes / actividad ---------- */
.obs-card-reports,
.obs-card-activity{
  padding: 16px !important;
}

.obs-card-reports .obs-card-head h3,
.obs-card-activity .obs-card-head h3{
  font-size: 13px !important;
}

.obs-card-reports .obs-mini-list,
.obs-card-activity .obs-mini-list{
  gap: 10px !important;
  margin-top: 12px !important;
}

.obs-card-reports .obs-mini-list li,
.obs-card-activity .obs-mini-list li{
  grid-template-columns: 20px minmax(0,1fr) !important;
  gap: 8px !important;
}

.obs-card-reports .obs-mini-badge,
.obs-card-activity .obs-mini-badge{
  width: 20px !important;
  height: 20px !important;
}

.obs-card-reports .obs-mini-list b,
.obs-card-activity .obs-mini-list b{
  font-size: 10px !important;
  line-height: 1.18 !important;
}

.obs-card-reports .obs-mini-list small,
.obs-card-activity .obs-mini-list small{
  margin-top: 2px !important;
  font-size: 9px !important;
}

.obs-card-reports .obs-card-link,
.obs-card-activity .obs-card-link{
  margin-top: 9px !important;
  font-size: 9.5px !important;
}

/* ---------- Logo Finch: único logo del grid ---------- */
.obs-card-users{
  display: grid !important;
  place-items: center !important;
  padding: 12px !important;
}

.obs-card-logo-wrap{
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
}

.obs-card-logo{
  width: min(112px, 90%) !important;
  max-height: 118px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(7,37,90,.08));
}

/* Tablet conserva orden legible sin forzar porcentajes de escritorio */
@media (min-width: 721px) and (max-width: 1250px){
  .obs-card-logo{
    width: min(120px, 72%) !important;
  }

  .obs-donut-hero-layout{
    grid-template-columns: minmax(116px, .9fr) minmax(150px, 1.1fr) !important;
  }
}

@media (max-width: 720px){
  .obs-donut-hero-layout{
    grid-template-columns: 1fr !important;
  }

  .obs-card-logo{
    width: 105px !important;
  }

  .obs-device-image{
    width: min(86%, 340px) !important;
    max-height: 160px !important;
  }
}


/* =========================================================
   CARDS v5 — más espacio para gráfica + KPI, menos para laptop
   ========================================================= */

:root{
  /* TAMAÑO VISUAL DE laptop.svg DENTRO DE SU CARD.
     Para hacerla más grande, sube 62% (ej. 72%) y/o 330px. */
  --obs-laptop-size: 62%;
  --obs-laptop-max-width: 330px;
}

@media (min-width: 1251px){
  /* Fila superior:
     gráfica ≈34% | KPI ≈27% | laptop ≈39% */
  .observatorio-page .obs-card-chart{
    grid-column: 1 / 35 !important;
  }

  .observatorio-page .obs-card-kpi{
    grid-column: 35 / 62 !important;
  }

  .observatorio-page .obs-card-device{
    grid-column: 62 / 101 !important;
  }
}

/* La gráfica aprovecha el nuevo ancho */
.obs-card-chart{
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.obs-chart-large{
  grid-template-columns: 44px minmax(0,1fr) !important;
  gap: 12px !important;
}

.obs-chart-canvas{
  height: 158px !important;
}

.obs-chart-xlabels{
  padding-left: 56px !important;
  font-size: 9.5px !important;
}

/* KPI de ingresos un poco más amplio visualmente */
.obs-card-kpi{
  padding: 17px 18px !important;
}

.obs-kpi-number{
  font-size: clamp(36px, 2.7vw, 50px) !important;
}

.obs-kpi-trend{
  max-width: 165px !important;
  font-size: 10.5px !important;
}

.obs-kpi-spark svg{
  height: 48px !important;
}

/* laptop.svg: tamaño independiente del ancho de su card */
.obs-device-image{
  width: min(var(--obs-laptop-size), var(--obs-laptop-max-width)) !important;
  max-width: var(--obs-laptop-max-width) !important;
  max-height: 170px !important;
}

/* =========================================================
   FIX v6 — CONTROL REAL DEL TAMAÑO DE laptop.svg
   ========================================================= */

:root{
  /* ESTE ES EL ÚNICO VALOR QUE CAMBIAS PARA EL TAMAÑO DE LA LAPTOP.
     Ejemplos: 45% = más chica | 58% = actual | 70% = más grande */
  --obs-laptop-width: 58%;
}

.obs-card-device{
  overflow: hidden !important;
}

.obs-device{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.obs-device-image{
  display: block !important;
  width: var(--obs-laptop-width) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}


/* =========================================================
   v7 — HERO COMPLETO EN PRIMERA VISTA
   Quita CTAs y sube la barra Empresas / Indicadores / ...
   ========================================================= */

/* Seguridad: aunque quedara el bloque en algún HTML cacheado, no ocupa espacio. */
.obs-actions{
  display: none !important;
}

@media (min-width: 1051px){
  /* Menos aire entre navegación y hero. */
  .fpage-header{
    padding-top: 22px !important;
    padding-bottom: 8px !important;
  }

  .obs-hero{
    align-items: start !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
  }

  .obs-text{
    padding-top: 28px !important;
  }

  .obs-eyebrow{
    margin-bottom: 18px !important;
  }

  .obs-copy{
    margin-top: 20px !important;
  }

  /* La plataforma empieza a la misma altura visual que el copy. */
  .obs-media{
    padding-top: 18px !important;
  }

  /* Sube la barra de capacidades y elimina el enorme espacio inferior anterior. */
  .oc-row{
    padding: 4px var(--obs-pad) 28px !important;
    margin-top: 0 !important;
  }

  .oc-row-inner{
    border-radius: 22px !important;
  }

  .oc-row-item{
    min-height: 108px !important;
    gap: 10px !important;
  }

  .oc-row-item svg{
    width: 25px !important;
    height: 25px !important;
  }

  .oc-row-item p{
    font-size: 16px !important;
  }
}

/* Pantallas con poca altura: compacta un poco más para que la barra siga visible. */
@media (min-width: 1051px) and (max-height: 900px){
  .fpage-header{
    padding-top: 16px !important;
    padding-bottom: 4px !important;
  }

  .obs-text{
    padding-top: 16px !important;
  }

  .obs-title{
    font-size: clamp(56px, 4.7vw, 70px) !important;
  }

  .obs-copy{
    margin-top: 16px !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
  }

  .obs-media{
    padding-top: 8px !important;
  }

  .obs-hero-board{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .oc-row{
    padding-top: 0 !important;
    padding-bottom: 20px !important;
  }

  .oc-row-item{
    min-height: 96px !important;
  }
}

/* =========================================================
   v8 — BAJAR UN POCO LA BARRA Y OCULTAR LA SIGUIENTE SECCIÓN
   ========================================================= */
@media (min-width: 1051px){
  .oc-row{
    margin-top: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 100px !important;
  }
}

@media (min-width: 1051px) and (max-height: 900px){
  .oc-row{
    margin-top: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 78px !important;
  }
}

/* =========================================================
   v9 — MÁS AIRE DEBAJO DEL MENÚ + POSICIÓN LAPTOP FIJA
   ========================================================= */

:root{
  /* Mueve TODO el contenido principal (hero + barra inferior) hacia abajo. */
  --obs-hero-down: 32px;

  /* Mantener exactamente como pidió el usuario. */
  --obs-laptop-width: 120%;
}

@media (min-width: 1051px){
  .obs-hero{
    margin-top: var(--obs-hero-down) !important;
  }

  .obs-device-image{
    width: var(--obs-laptop-width) !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    transform: translateY(-70px) !important;
  }
}

/* En pantallas un poco más bajas conserva aire, pero no desperdicia tanta altura. */
@media (min-width: 1051px) and (max-height: 900px){
  .obs-hero{
    margin-top: 24px !important;
  }
}

/* =========================================================
   v10 — CENTRAR VERTICALMENTE EL BLOQUE DE TEXTO
   Desde "Observatorio de datos Finch" hasta "decisión"
   respecto al dashboard completo.
   ========================================================= */
@media (min-width: 1051px){
  .obs-text{
    align-self: center !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* =========================================================
   v11 — DE DATOS A SIGNIFICADO + CTA FINAL
   ========================================================= */

/* El CTA genérico del sitio se reemplaza en esta página por el bloque azul nuevo. */
body.observatorio-page > #finchCta{
  display: none !important;
}

.oc-meaning{
  position: relative;
  background: #f7f1ed;
  color: var(--obs-ink);
  padding: clamp(90px, 8vw, 125px) var(--obs-pad) clamp(70px, 7vw, 105px);
}

.oc-meaning-shell{
  display: grid;
  grid-template-columns: minmax(290px, .82fr) minmax(0, 1.75fr);
  gap: clamp(42px, 5vw, 78px);
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  align-items: start;
}

.oc-meaning-copy{
  padding-top: 18px;
}

.oc-meaning-copy h2{
  margin: 0;
  color: var(--obs-ink);
  font-family: var(--obs-display);
  font-size: clamp(46px, 4vw, 64px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.oc-question-list{
  display: grid;
  gap: clamp(24px, 2.2vw, 34px);
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}

.oc-question-list li{
  display: grid;
  grid-template-columns: 31px minmax(0,1fr);
  gap: 15px;
  align-items: center;
  color: #37322e;
  font-family: var(--obs-display);
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.28;
}

.oc-question-check{
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1.5px solid var(--obs-gold);
  border-radius: 50%;
  color: var(--obs-gold-2);
  font-family: var(--obs-ui);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 0 0 5px rgba(199,162,90,.08);
}

.oc-insight-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.oc-insight-card{
  position: relative;
  min-width: 0;
  min-height: 300px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid #e7dfd8;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 30px rgba(42,36,31,.035);
}

.oc-insight-card h3{
  margin: 0;
  color: #2a2724;
  font-family: var(--obs-body);
  font-size: 16px;
  font-weight: 600;
}

.oc-bars-legend{
  position: absolute;
  top: 54px;
  right: 24px;
  display: grid;
  gap: 8px;
  color: #756e68;
  font-family: var(--obs-ui);
  font-size: 10px;
}

.oc-bars-legend span{
  display: flex;
  align-items: center;
  gap: 7px;
}

.oc-bars-legend i{
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--obs-navy);
}

.oc-bars-legend span:last-child i{
  background: #d6dbe1;
}

.oc-bar-chart{
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 8px;
  height: 230px;
  margin-top: 22px;
}

.oc-bar-y{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0 27px;
  color: #98918a;
  font-family: var(--obs-ui);
  font-size: 9px;
}

.oc-bar-plot{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
  padding: 0 8px;
}

.oc-grid-lines{
  position: absolute;
  inset: 0 0 27px;
  background: repeating-linear-gradient(to bottom, #e7e1dc 0 1px, transparent 1px 52px);
  pointer-events: none;
}

.oc-bar-group{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 9px;
  height: 100%;
  text-align: center;
}

.oc-bars{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-height: 0;
}

.oc-bars i,
.oc-bars b{
  width: 18px;
  height: var(--v);
  min-height: 16px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #173f78 0%, var(--obs-navy) 100%);
}

.oc-bars b{
  width: 12px;
  background: #d6dbe1;
}

.oc-bar-group > span{
  color: #615c57;
  font-family: var(--obs-ui);
  font-size: 9px;
  white-space: nowrap;
}

.oc-world-map{
  position: relative;
  height: 238px;
  margin-top: 14px;
}

.oc-world-map svg{
  position: absolute;
  inset: 16px 0 0;
  width: 100%;
  height: 190px;
}

.oc-world-map .map-base{
  fill: #d9dcdf;
  opacity: .92;
}

.oc-world-map .map-active{
  fill: #2d5a96;
}

.oc-map-badge{
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  color: #56504b;
  font-family: var(--obs-ui);
}

.oc-map-badge b{
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid #d8b66f;
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  color: #37312b;
  font-size: 13px;
  box-shadow: 0 7px 18px rgba(80,64,38,.06);
}

.oc-map-badge small{
  margin-top: 5px;
  font-size: 8px;
  white-space: nowrap;
}

.oc-map-badge.b1{ left: 7%; top: 76px; }
.oc-map-badge.b2{ left: 26%; top: 160px; }
.oc-map-badge.b3{ left: 49%; top: 36px; }
.oc-map-badge.b4{ right: 0; top: 86px; }
.oc-map-badge.b5{ right: 22%; top: 160px; }

.oc-margin-chart{
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  gap: 8px;
  height: 225px;
  margin-top: 24px;
}

.oc-margin-y{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0 28px;
  color: #98918a;
  font-family: var(--obs-ui);
  font-size: 9px;
}

.oc-margin-plot{
  position: relative;
  min-width: 0;
}

.oc-margin-plot .oc-grid-lines{
  inset: 0 0 28px;
}

.oc-margin-plot svg{
  position: absolute;
  z-index: 1;
  inset: 4px 0 30px;
  width: 100%;
  height: calc(100% - 34px);
}

.oc-margin-badge{
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 7%;
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1.5px solid #b7d9ae;
  border-radius: 50%;
  background: #f8fff6;
  color: #5a9a4d;
  font-family: var(--obs-ui);
  font-size: 13px;
  font-weight: 750;
}

.oc-margin-x{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  color: #85807a;
  font-family: var(--obs-ui);
  font-size: 9px;
}

.oc-alerts-card{
  display: flex;
  flex-direction: column;
}

.oc-alert-list{
  display: grid;
  gap: 22px;
  margin-top: 35px;
}

.oc-alert-list > div{
  display: grid;
  grid-template-columns: 29px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  font-family: var(--obs-ui);
}

.oc-alert-list i{
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.oc-alert-list i.danger{
  border: 1.5px solid #d86556;
  color: #d86556;
  background: #fff6f4;
}

.oc-alert-list i.warning{
  background: #d9aa45;
  color: #fff;
}

.oc-alert-list span{
  color: #413c38;
  font-size: 11px;
  line-height: 1.25;
}

.oc-alert-list time{
  color: #918b84;
  font-size: 9px;
  white-space: nowrap;
}

.oc-alerts-card > a{
  align-self: flex-end;
  margin-top: auto;
  color: var(--obs-gold-2);
  text-decoration: none;
  font-family: var(--obs-ui);
  font-size: 11px;
  font-weight: 700;
}

.oc-growth-cta{
  position: relative;
  isolation: isolate;
  min-height: 430px;
  margin: 0 var(--obs-pad) clamp(80px, 7vw, 110px);
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 5%, rgba(29,64,108,.32), transparent 46%),
    linear-gradient(180deg, #082a57 0%, #06264f 100%);
  color: white;
}

.oc-growth-content{
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 65px 24px 45px;
  text-align: center;
}

.oc-growth-content h2{
  margin: 0;
  color: #fff;
  font-family: var(--obs-display);
  font-size: clamp(42px, 4.2vw, 62px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.oc-growth-content p{
  margin: 24px 0 0;
  color: rgba(255,255,255,.78);
  font-family: var(--obs-body);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
}

.oc-growth-btn{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  margin-top: 24px;
  padding: 6px 7px 6px 23px;
  border-radius: 999px;
  background: #fff;
  color: #1b1815;
  text-decoration: none;
  font-family: var(--obs-body);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(0,0,0,.13);
}

.oc-growth-btn i{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d9bb79 0%, #b98736 100%);
  color: white;
  font-family: var(--obs-ui);
  font-style: normal;
}

.oc-growth-wave{
  position: absolute;
  z-index: 1;
  bottom: -42px;
  width: 62%;
  height: 190px;
  opacity: .9;
  background-image: radial-gradient(circle, rgba(209,166,80,.82) 1.35px, transparent 1.65px);
  background-size: 9px 9px;
  mask-image: radial-gradient(ellipse at center, #000 0 45%, transparent 72%);
  transform-origin: center;
}

.oc-growth-wave-left{
  left: -8%;
  transform: rotate(8deg) skewX(-12deg) scaleY(.55);
}

.oc-growth-wave-right{
  right: -8%;
  transform: rotate(-8deg) skewX(12deg) scaleY(.55);
}

.oc-growth-cta::before,
.oc-growth-cta::after{
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 18px;
  width: 48%;
  height: 92px;
  border-top: 1px solid rgba(211,170,87,.42);
  border-radius: 50%;
  opacity: .75;
}

.oc-growth-cta::before{ left: -3%; transform: rotate(5deg); }
.oc-growth-cta::after{ right: -3%; transform: rotate(-5deg); }

@media (max-width: 1050px){
  .oc-meaning-shell{
    grid-template-columns: 1fr;
  }

  .oc-meaning-copy{
    max-width: 680px;
    padding-top: 0;
  }

  .oc-question-list{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px 28px;
  }

  .oc-insight-card{
    min-height: 290px;
  }
}

@media (max-width: 720px){
  .oc-meaning{
    padding: 70px 20px 55px;
  }

  .oc-meaning-copy h2{
    font-size: clamp(43px, 12vw, 56px);
  }

  .oc-question-list{
    grid-template-columns: 1fr;
    margin-top: 34px;
  }

  .oc-question-list li{
    font-size: 18px;
  }

  .oc-insight-grid{
    grid-template-columns: 1fr;
  }

  .oc-insight-card{
    min-height: 275px;
    padding: 20px 18px;
  }

  .oc-bars-legend{
    right: 18px;
  }

  .oc-growth-cta{
    min-height: 390px;
    margin: 0 20px 70px;
    border-radius: 20px;
  }

  .oc-growth-content{
    padding: 58px 20px 40px;
  }

  .oc-growth-content h2{
    font-size: clamp(38px, 10.5vw, 50px);
  }

  .oc-growth-wave{
    width: 100%;
    opacity: .65;
  }
}


/* ===== Ajuste mapa de México ===== */
.oc-mexico-map{
  height: 238px;
}

.oc-mexico-map svg{
  inset: 8px 6px 0;
  width: calc(100% - 12px);
  height: 198px;
}

.oc-mexico-map .map-base{
  fill: #dde0e4;
  stroke: #ffffff;
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.oc-mexico-map .map-active{
  fill: #3d67a7;
  stroke: #ffffff;
  stroke-width: 2px;
  stroke-linejoin: round;
}

.oc-mexico-map .oc-map-badge b{
  width: 44px;
  height: 44px;
}

.oc-mexico-map .oc-map-badge small{
  font-size: 8px;
}

.oc-mexico-map .oc-map-badge.b1{ left: 9%; top: 56px; }
.oc-mexico-map .oc-map-badge.b2{ left: 37%; top: 140px; }
.oc-mexico-map .oc-map-badge.b3{ left: 22%; top: 146px; }
.oc-mexico-map .oc-map-badge.b4{ right: 14%; top: 98px; }
.oc-mexico-map .oc-map-badge.b5{ right: 5%; top: 152px; }


/* =========================================================
   v13 — MAPA.SVG + transición LAPTOP -> TABLET al hover
   ========================================================= */

/* La card usa directamente el SVG de México ubicado en assets/MAPA.svg. */
.oc-mexico-map{
  position: relative;
  height: 238px;
  overflow: visible;
}

.oc-mexico-map > svg{
  display: none !important;
}

.oc-mexico-map-image{
  position: absolute;
  inset: 4px 8px 8px;
  width: calc(100% - 16px);
  height: calc(100% - 12px);
  display: block;
  object-fit: contain;
  object-position: center;
}

/* Conservamos los badges por encima del mapa real. */
.oc-mexico-map .oc-map-badge{
  z-index: 2;
}

/* Contenedor 3D del dispositivo. */
.obs-device{
  perspective: 1200px !important;
  overflow: visible !important;
}

.obs-device-flip{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.2,.75,.25,1);
  will-change: transform;
}

.obs-device-face{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.obs-device-front{
  transform: rotateY(0deg);
}

.obs-device-back{
  transform: rotateY(180deg);
}

/* Mantiene EXACTAMENTE los controles que ya estabas usando para la laptop. */
.obs-device-laptop{
  width: var(--obs-laptop-width) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  transform: translateY(-70px) !important;
}

/* Control separado para la tablet por si luego la quieres afinar. */
:root{
  --obs-tablet-width: 82%;
  --obs-tablet-y: -34px;
}

.obs-device-tablet{
  width: var(--obs-tablet-width) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  transform: translateY(var(--obs-tablet-y)) !important;
}

@media (hover:hover) and (pointer:fine){
  .obs-card-device:hover .obs-device-flip{
    transform: rotateY(180deg);
  }
}

/* En touch no forzamos el giro accidental; se conserva la laptop. */
@media (hover:none), (pointer:coarse){
  .obs-device-flip{
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .obs-device-flip{
    transition: none !important;
  }
}

/* =========================================================
   v14 — MORPH LAPTOP -> TABLET SIN TRASLAPE
   La laptop gira hasta quedar de canto, desaparece y DESPUÉS
   entra la tablet. Evita que se vean ambos dispositivos a la vez.
   ========================================================= */

:root{
  /* Conservamos exactamente el tamaño/posición que ya aprobaste. */
  --obs-laptop-width: 120%;
  --obs-laptop-y: -70px;

  /* Controles independientes de la tablet. */
  --obs-tablet-width: 78%;
  --obs-tablet-y: -38px;
}

.obs-card-device{
  overflow: hidden !important;
}

.obs-device{
  position: relative !important;
  perspective: 1500px !important;
  overflow: hidden !important;
}

/* Ya no giramos TODO el contenedor. Cada dispositivo gira por separado. */
.obs-device-flip{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 220px !important;
  transform: none !important;
  transform-style: flat !important;
  transition: none !important;
}

.obs-device-face{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  perspective: 1500px !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
}

.obs-device-front,
.obs-device-back{
  transform: none !important;
}

/* ESTADO INICIAL — LAPTOP */
.obs-device-laptop{
  width: var(--obs-laptop-width) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform:
    translateY(var(--obs-laptop-y))
    rotateY(0deg)
    scale(1) !important;
  transform-origin: center center !important;
  transition:
    transform .42s cubic-bezier(.55,.02,.32,.98),
    opacity .10s linear .19s !important;
  will-change: transform, opacity;
}

/* La tablet comienza de canto y completamente oculta. */
.obs-device-tablet{
  width: var(--obs-tablet-width) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  opacity: 0 !important;
  transform:
    translateY(var(--obs-tablet-y))
    rotateY(-88deg)
    scale(.90) !important;
  transform-origin: center center !important;
  transition:
    transform .42s cubic-bezier(.2,.78,.24,1) .24s,
    opacity .10s linear .24s !important;
  will-change: transform, opacity;
}

@media (hover:hover) and (pointer:fine){
  /* Desactivamos el flip viejo del padre. */
  .obs-card-device:hover .obs-device-flip{
    transform: none !important;
  }

  /* 1) laptop gira y se apaga al llegar casi a 90°. */
  .obs-card-device:hover .obs-device-laptop{
    opacity: 0 !important;
    transform:
      translateY(var(--obs-laptop-y))
      rotateY(88deg)
      scale(.90) !important;
    transition:
      transform .42s cubic-bezier(.55,.02,.32,.98),
      opacity .08s linear .17s !important;
  }

  /* 2) después entra la tablet desde el lado contrario. */
  .obs-card-device:hover .obs-device-tablet{
    opacity: 1 !important;
    transform:
      translateY(var(--obs-tablet-y))
      rotateY(0deg)
      scale(1) !important;
    transition:
      transform .42s cubic-bezier(.2,.78,.24,1) .22s,
      opacity .08s linear .22s !important;
  }
}

/* Al retirar el mouse: primero sale tablet, luego reaparece laptop. */
@media (hover:hover) and (pointer:fine){
  .obs-device-laptop{
    transition-delay: .20s, .20s !important;
  }

  .obs-card-device:hover .obs-device-laptop{
    transition-delay: 0s, .17s !important;
  }

  .obs-device-tablet{
    transition-delay: 0s, 0s !important;
  }

  .obs-card-device:hover .obs-device-tablet{
    transition-delay: .22s, .22s !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .obs-device-laptop,
  .obs-device-tablet{
    transition: none !important;
  }

  .obs-card-device:hover .obs-device-laptop{
    opacity: 0 !important;
  }

  .obs-card-device:hover .obs-device-tablet{
    opacity: 1 !important;
    transform: translateY(var(--obs-tablet-y)) !important;
  }
}

/* =========================================================
   v15 — POSICIÓN VERTICAL INDEPENDIENTE DEL GIRO
   Ahora el eje Y NO vive dentro del transform de la animación.
   Valor positivo = baja. Valor negativo = sube.
   ========================================================= */

:root{
  --obs-laptop-width: 110%;
  --obs-laptop-y: -5px;

  --obs-tablet-width: 95%;
  --obs-tablet-y: 4px;
}

.obs-device-laptop,
.obs-device-tablet{
  position: relative !important;
}

.obs-device-laptop{
  top: var(--obs-laptop-y) !important;
  transform: rotateY(0deg) scale(1) !important;
}

.obs-device-tablet{
  top: var(--obs-tablet-y) !important;
  transform: rotateY(-88deg) scale(.90) !important;
}

@media (hover:hover) and (pointer:fine){
  .obs-card-device:hover .obs-device-laptop{
    top: var(--obs-laptop-y) !important;
    transform: rotateY(88deg) scale(.90) !important;
  }

  .obs-card-device:hover .obs-device-tablet{
    top: var(--obs-tablet-y) !important;
    transform: rotateY(0deg) scale(1) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .obs-card-device:hover .obs-device-tablet{
    top: var(--obs-tablet-y) !important;
    transform: rotateY(0deg) scale(1) !important;
  }
}