:root{
  --c-text:#1C1C1C;--c-red:#D02D37;--c-yellow:#FAB62D;--c-burgundy:#720A15;--c-surface:#F2F2F2;--c-white:#FFFFFF;--shadow:0 16px 40px rgba(0,0,0,0.12);--hero-panel-h:640px;
}
@media (max-width:1024px){:root{--hero-panel-h:560px}}
@media (max-width:768px){:root{--hero-panel-h:420px}}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:'Work Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--c-text);background:#fff;line-height:1.5}
img{max-width:100%;display:block;height:auto}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;border-radius:8px;z-index:9999}
.container{width:min(100%,1320px);margin-inline:auto;padding-inline:16px}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:999px;text-decoration:none;border:1px solid transparent;font-weight:600}
.btn--primary{background:var(--c-red);color:#fff}.btn--ghost-white{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn:focus-visible{outline:3px solid var(--c-yellow);outline-offset:2px}
.site-header{position:sticky;top:0;z-index:50;pointer-events:none;background:transparent}

.nav .brand {
  display: inline-flex;
  align-items: center;
  padding-left: 60px; /* aire extra a la derecha */
}

.nav{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;backdrop-filter:blur(14px);background:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.6);border-radius:100px;box-shadow:var(--shadow);padding:10px 12px;position:relative;left:50%;transform:translateX(-50%);width:min(96%,1320px)}
.nav::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%);mix-blend-mode:screen;pointer-events:none;opacity:.5;}
.nav .brand{display:inline-flex;align-items:center}.nav__toggle{display:none;border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:.5rem 1rem}
.nav .brand img {
  display: block;
  margin-right: 16px; /* espacio a la derecha */
}

.nav__menu{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.nav__menu a{display:inline-block;padding:.6rem 1rem;border-radius:999px;color:var(--c-text);text-decoration:none;font-weight:600}.nav__menu a:hover{background:rgba(0,0,0,.06)}
/* Fuerza el color del botón dentro del menú */
.nav__menu .btn.btn--primary {
  background: var(--c-red);
  color: var(--c-white);
}
.nav__menu .btn.btn--primary:hover {
  filter: brightness(1.05);
}

:root{
  /* Cambia la ruta por tu imagen real */
  --page-bg: url("assets/img/Blackgraund-image.png");
}

/* Quita backgrounds previos aquí si los tenías */
body{ background: none; position: relative; }

/* Imagen fija al fondo, no interfiere con el layout */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--page-bg) center/cover no-repeat;
  filter: contrast(.9) brightness(.9);
}

/* Velo suave para legibilidad (opcional) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0,0,0,.30), rgba(0,0,0,.05));
}
/* Header flotando sobre el fondo */
.site-header{
  position: fixed;   /* antes: sticky */
  top: 8px;          /* lo acerca al borde superior */
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;   /* mantiene la “placa” inerte */
}

/* La nav sigue siendo clickeable */
.nav{
  pointer-events: auto;
  margin-top: 0;          /* antes: 16px → causa aire extra */
}

/* Reduce el acolchado superior del hero: ya no necesitas 120px */
.hero{
  position: relative;
  padding: 72px 0 48px;   /* antes: 120px 0 48px */
}

/* Si quieres un poco más o menos de aire según pantalla: */
@media (max-width: 1024px){
  .hero{ padding-top: 64px; }
}
@media (max-width: 768px){
  .hero{ padding-top: 56px; }
}

/* Mantén el hero tal cual para que NO rompa la grilla */
.hero{ position: relative; padding: 0px 0 8px; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:62% 38%; gap:18px; }

/* Si ya no quieres imagen específica en el hero, solo deja el overlay: */
.hero__bg::before{ content:""; display:none; }      /* sin imagen del hero */
.hero__bg::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(0deg,rgba(0,0,0,.30),rgba(0,0,0,.05)); }

.carousel{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12);block-size:var(--hero-panel-h)}
.carousel__viewport{position:relative;height:100%}
.carousel__viewport img{width:100%;height:100%;object-fit:cover}
.carousel__overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.50) 100%);mix-blend-mode:multiply;pointer-events:none}
.slide{display:none}.slide.is-active{display:block}
.carousel__prev,.carousel__next{width:56px;height:56px;border-radius:50%;background:var(--c-red);border:none;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.carousel__prev{left:14px}.carousel__next{right:14px}
.carousel__prev::before,.carousel__next::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path fill=%22%23ffffff%22 d=%22M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z%22/></svg>') center/26px no-repeat}
.carousel__next::before{transform:scaleX(-1)}
.carousel__prev:hover,.carousel__next:hover{filter:brightness(1.05)}.carousel__prev:active,.carousel__next:active{transform:translateY(-50%) scale(.98)}
.carousel__toggle{position:absolute;left:12px;bottom:12px;border-radius:999px;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.25);color:#fff;padding:.5rem .8rem;cursor:pointer}
.carousel__dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:8px}
.carousel__dots button{width:12px;height:12px;border-radius:50%;border:1.5px solid #fff;background:transparent}
.carousel__dots button[aria-selected="true"]{background:#fff}
.embed-card{background:linear-gradient(180deg,#fff 0%, #fff 70%) padding-box, linear-gradient(180deg,#720A15, #FFFFFF) border-box; border:2px solid transparent;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.12);block-size:var(--hero-panel-h);display:flex;flex-direction:column}
.embed-card__note{margin-top:8px;font-size:.9rem;opacity:.9}
.fixed-frame{flex:1;min-height:0;overflow:hidden;border-radius:16px}
.fixed-frame iframe{display:block;width:100%;height:100%;overflow:auto}
.section{padding:64px 0}.section--alt{background:var(--c-surface)}.section--red{background:var(--c-red);color:#fff}
.section__header.center{text-align:center}.underline{width:120px;height:3px;border-radius:24px;background:currentColor;opacity:.25;margin:8px 0 0}

/* --- Subrayado: base centrado en todas las secciones --- */
.underline{
  width:120px;
  height:3px;
  border-radius:24px;
  background:currentColor;
  opacity:.25;
  display:block;
  margin:8px auto 0;           /* centrado por defecto */
}

/* Color amarillo, sin tocar márgenes */
.underline--yellow{
  background:var(--c-yellow);
  opacity:1;
}

/* Base: centrado en todas las secciones */
.underline{
  width:120px;
  height:3px;
  border-radius:24px;
  background:currentColor;
  opacity:.25;
  display:block;
  margin:8px auto 0;  /* centrado por defecto */
}

.underline--yellow{
  background:var(--c-yellow);
  opacity:1;
}

.thin{ height:3px; }

/* En #que-es: alinear con el texto (izquierda dentro del .copy) */
#que-es .copy .underline{
  margin-left:0;
  margin-right:auto;   /* se pega al inicio del texto */
}



.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:62px;align-items:center}
#que-es .underline--yellow{margin-left:auto;margin-right:0}
.video-card .video-shell{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.video-chip.glass{position:absolute;top:12px;right:12px;padding:.4rem .8rem;border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);font-weight:600}
.video-frame{display:block;width:100%;aspect-ratio:16/9;border:0}
.ruta__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
#cifras .section__header + *{margin-top:28px}#ruta .section__header + *{margin-top:28px}
.card.glass{position:relative;border-radius:16px;padding:18px;background:rgba(255,255,255,.12);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.45);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.card h3{margin:6px 0 8px;font-family:'Montserrat'}
/* Imagen de fondo + overlay blanco translúcido, con propiedades separadas */
.section--image{
  --overlay: linear-gradient(0deg, rgba(255,255,255,.85), rgba(255,255,255,.85));
  background-image: var(--overlay), var(--bg);
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}



.req-card{background:var(--c-red);color:#fff;border-radius:24px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.12);max-width:840px;margin-inline:auto}
.req-list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.req-list li{padding-left:36px;position:relative}
.req-list li::before{content:"";position:absolute;left:0;top:.25rem;width:24px;height:24px;border-radius:50%;background:var(--c-red);border:2px solid #fff;box-shadow:inset 0 0 0 999px rgba(255,255,255,.15)}
.cifras-grid-v2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.col{display:grid;gap:24px}.col--right{margin-top:40px}
.tile{position:relative;border-radius:20px;padding:60px;box-shadow:0 10px 30px rgba(0,0,0,.08);display:flex;flex-direction:column;justify-content:center;min-height:var(--h)}
.tile--red{background:var(--c-red);color:#fff}.tile--white{background:#fff;color:var(--c-text)}
.tile__metric{font-family:'Montserrat';font-weight:800;font-size:2.2rem;margin:0 0 0px}.tile__desc{margin:0;opacity:.95}
.badge{position:absolute;display:grid;place-items:center}.badge--square{width:56px;height:56px;border-radius:10px;background:var(--c-yellow)}
.badge--pin{width:60px;height:60px;border-radius:999px;background:#ECABAF}
.pos-tl{left:-12px;top:-12px}.pos-br{right:-12px;bottom:-12px}.pos-tr{right:-12px;top:-12px}
.pair{position:absolute;display:flex;align-items:center;gap:10px}.pair .chip{background:var(--c-surface);color:var(--c-red);border:1px solid #ECABAF;border-radius:999px;padding:6px 12px;font-weight:600}
@media (prefers-reduced-motion:no-preference){.tile{transition:transform .6s ease}.tile:hover{transform:translateY(-6px)}}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:18px}
.option-row{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;text-decoration:none;color:inherit;padding:18px;border-top:1px solid #000;border-bottom:1px solid #000}
.icon-circle{width:56px;height:56px;border-radius:50%}.icon--pink{background:#ECABAF}.icon--yellow{background:var(--c-yellow)}
.arrow{width:28px;height:28px;background:currentColor;mask:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path fill=%22%23000%22 d=%22M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z%22/></svg>');
 center/contain no-repeat;color:#1C1C1C}
.row-text span{display:block;opacity:.8}
.site-footer{background:var(--c-red);color:#fff;margin-top:32px}.separator{height:2px;background:#fff;opacity:1}
.footer__content{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0}.social{display:flex;gap:12px}
.soc{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--c-red);text-decoration:none}
.copyright{text-align:center;padding:12px 0}
@media (max-width:1024px){
  .nav__toggle{display:inline-flex;order:-1}.nav{gap:8px}.nav .brand{order:1;margin-left:auto}
  .nav__menu{position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px;display:none}
  .hero__grid{grid-template-columns:1fr;gap:12px}.hero__right{order:-1}
}
@media (max-width:768px){.two-col{grid-template-columns:1fr;gap:12px}.ruta__grid,.options-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}


/* Requisitos ajustes */
.section.section--image.requisitos{padding:72px 0}
.requisitos .container{position:relative}
.requisitos .req-card{margin-left:auto; max-width:980px; border-radius:28px; padding:28px 28px; }
.requisitos .req-card h2{font-family:'Montserrat';font-weight:800;font-size:2rem;margin:0 0 18px}
.requisitos .req-list{gap:0}
.requisitos .req-list li{
  position:relative;
  padding:22px 12px 22px 84px; /* top/bottom padding as requested */
  border-radius:16px;
}
.requisitos .req-list li + li{margin-top:6px}
/* Left circle with check icon */
.requisitos .req-list li::before{
  content:"";
  position:absolute;left:22px;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18), inset 0 0 0 2px rgba(255,255,255,.6);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23D02D37" d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
  background-repeat:no-repeat;background-position:center;background-size:28px;
}
/* Divider gradient under each item except last */
.requisitos .req-list li::after{
  content:"";
  position:absolute;left:84px;right:12px;bottom:0;height:2px;
  background:linear-gradient(90deg, #720A15 0%, rgba(255,255,255,0) 100%);
  opacity:.8;
}
.requisitos .req-list li:last-child::after{display:none}


/* Badges for Ruta cards */
.ruta__grid .card{position:relative;overflow:visible}
.badge{position:absolute;display:grid;place-items:center}
.badge--square-white{
  width:64px;height:64px;border-radius:16px;background:#fff;
  display:grid;place-items:center;
  margin-bottom:18px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.badge--square-white::before{
  content:"";width:32px;height:32px;
  background:currentColor;color:var(--c-red);
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 5.65-7 10-7 10z"/></svg>') center/contain no-repeat;
}
.badge--circle{width:76px;height:76px;border-radius:50%;right:24px;bottom:-28px;background:var(--c-yellow);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.badge--circle::before{
  content:"";width:34px;height:34px;background:#fff;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.17 4.83 12 3.41 13.41 9 19 21 7l-1.41-1.41z"/></svg>') center/contain no-repeat;
}
@media (max-width:768px){
  .badge--square-white{left:16px;top:-20px;width:60px;height:60px;border-radius:14px}
  .badge--circle{right:16px;bottom:-22px;width:64px;height:64px}
}

.badge-inside{display:inline-block}
.badge--square-white::before{
  content:"";width:28px;height:28px;
  background:currentColor;color:var(--c-red);
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 5.65-7 10-7 10z"/></svg>') center/contain no-repeat;
  display:block;margin:auto;
}

/* 0) Asegura que el fondo cubra todo detrás del header */
html{background:transparent;}
body{ background: none; position: relative; }

/* Fondo global fijo detrás de TODO (header + main) */
:root{ --page-bg: url("assets/img/Blackgraund-image.png"); }
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--page-bg) center/cover no-repeat;
  filter: contrast(.95) brightness(.95);
}
/* Velo MUY suave (evitar banda oscura bajo el header) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.18) 100%);
}

/* 1) Hero: deja el overlay pero más sutil arriba */
.hero{ position: relative; padding: 120px 0 48px; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
/* SIN imagen propia del hero */
.hero__bg::before{ content:""; display:none; }
/* Overlay más suave arriba para que se vea el fondo debajo del header */
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.32) 100%);
}

/* 2) Responsive del hero:
   - En desktop conservas alturas fijas
   - En <=1024 y <=768 las pasamos a AUTO para que no rompa el apilado */
:root{ --hero-panel-h: 640px; }
@media (max-width:1024px){ :root{ --hero-panel-h: 520px; } }
@media (max-width:768px){ :root{ --hero-panel-h: 420px; } }

/* Desktop: igual que ya tenías */
.carousel{ block-size: var(--hero-panel-h); }
.carousel__viewport{ height:100%; }
.embed-card{ block-size: var(--hero-panel-h); display:flex; flex-direction:column; }
.embed-card .fixed-frame{ flex:1; min-height:0; overflow:hidden; border-radius:16px; }
.embed-card .fixed-frame iframe{ width:100%; height:100%; display:block; overflow:auto; }

/* Tablet: deja crecer en alto automáticamente */
@media (max-width:1024px){
  .hero__grid{ grid-template-columns: 1fr; gap:12px; }
  .hero__right{ order:-1; }                    /* tu regla original */
  .carousel{ block-size:auto; }                /* ← clave */
  .carousel__viewport{ height:auto; aspect-ratio: 16/10; }
  .embed-card{ block-size:auto; }
  .embed-card .fixed-frame iframe{ height:520px; } /* altura razonable */
}

/* Phone: aún más compacto */
@media (max-width:768px){
  .carousel__viewport{ aspect-ratio: 16/9; }
  .embed-card .fixed-frame iframe{ height:480px; }
}

/* 3) Quita el margen “espaciador” si no lo quieres arriba del header */
.nav{ margin-top: 12px; } /* o 0 si quieres que toque el borde superior */
/* 1) Elimina márgenes del figure y fuerza a que el slide llene el viewport */
.carousel__viewport figure,
.slide { margin: 0; }

/* 2) El viewport NO debe imponer aspect-ratio cuando ya hay altura fija */
.carousel__viewport{
  height: 100%;
  aspect-ratio: auto !important; /* pisa el inline 16/10 */
  position: relative;
}

/* 3) Los slides ocupan todo el área visible */
.carousel__viewport > .slide{
  position: absolute;
  inset: 0;              /* top:0 right:0 bottom:0 left:0 */
  display: none;         /* ya lo manejas con .is-active */
}
.carousel__viewport > .slide.is-active{ display:block; }

/* 4) La imagen SIEMPRE “cubre” el área (recorte controlado) */
.carousel__viewport img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* rellena sin deformar */
  object-position: center;
  display: block;         /* elimina espacios fantasmas inline */
}
/* --- Carrusel: que siempre tenga altura visible --- */
.carousel{
  block-size: var(--hero-panel-h);  /* 640 / 560 / 420px por tus @media */
}

/* El viewport llena la altura del carrusel */
.carousel__viewport{
  height: 100%;
  aspect-ratio: auto !important;   /* ignora cualquier inline 16/10 */
  position: relative;
  min-height: 1px;                 /* safety contra colapsos */
}

/* Slides absolutas, ocupan todo el viewport */
.carousel__viewport > .slide{
  position: absolute;
  inset: 0;
  display: none;
}
.carousel__viewport > .slide.is-active{ display:block; }

/* La imagen siempre cubre */
.carousel__viewport img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.carousel__dots button {
  width: 14px;
  height: 14px;
  border-radius: 50% !important;  /* fuerza círculo perfecto */
  border: 2px solid #fff;
  background: transparent;
  padding: 0;        /* elimina relleno interno */
  line-height: 0;    /* evita que el texto invisible deforme */
  display: inline-block;
}

.carousel__dots button[aria-selected="true"] {
  background: #fff;
}
/* ===== CIFRAS: layout base (desktop/tablet) ===== */
.cifras-grid-v2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:stretch;
}

.col{display:grid; gap:24px}
.col--right{margin-top:40px}          /* tu offset visual en desktop */

.tile{
  position:relative;
  border-radius:28px;
  padding:52px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:var(--h, auto);          /* respeta --h si existe, si no, auto */
}

.tile__metric{
  font-family:'Montserrat',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:200;
  font-size:2.2rem;
  margin:0 0 8px;
}

/* ===== CIFRAS: responsivo ===== */
@media (max-width: 1024px){
  .cifras-grid-v2{
    grid-template-columns: 1fr;       /* apilar columnas */
    gap:20px;
  }
  .col--right{ margin-top:0 }          /* quita offset en móvil */
  .tile{
    min-height:auto;                  /* ignora alturas fijas */
    padding:20px;
  }
  .tile__metric{
    /* evita que el número enorme descuadre */
    font-size: clamp(1.6rem, 6vw, 2rem);
    line-height:1.15;
    word-break: break-word;
  }
  .tile__desc{ font-size: 1rem }
  
  /* Los adornos absolutas causaban overflow -> hacerlos flujo normal */
  .pair, .badge{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin-top: 12px;
  }

  /* Ajusta las “chips” para que no desborden */
  .pair .chip{
    font-size: .9rem;
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* Si alguna badge tenía tamaños fijos grandes, hazlos más chicos */
  .badge--square{ width:44px; height:44px; border-radius:10px }
  .badge--pin{ width:48px; height:48px; border-radius:999px }
}

/* En pantallas muy pequeñas, remata márgenes y paddings */
@media (max-width: 480px){
  .cifras-grid-v2{ gap:16px }
  .col{ gap:16px }
  .tile{ padding:16px; border-radius:20px }
  .pair .chip{ font-size:.85rem; padding:5px 9px }
}
/* Mantener el estilo del cuadro blanco */
.badge--square-white {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;   /* centra el contenido */
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  overflow: hidden;      /* asegura que nada sobresalga */
}

/* Desactivar el ícono que estaba antes */
.badge--square-white::before {
  content: none !important;
}

/* Ajustes para el ícono personalizado */
.badge--square-white img {
  width: 32px;       /* tamaño del icono */
  height: 32px;
  object-fit: contain;
  display: block;
}
/* Estilo base del chip */
.chip {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 1rem;
  color: #1C1C1C;              /* texto oscuro para contraste */
  border-radius: 20px;            /* sin bordes redondeados */
  position: relative;          /* necesario para los triángulos */
  background: var(--c-yellow); /* tu color amarillo */
}

/* Puntas tipo nota (flechas) */
.chip--yellow::before,
.chip--yellow::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top: 100% solid transparent;    /* altura del chip */
  border-bottom: 100% solid transparent; /* altura del chip */
}

.chip--yellow::before {
  left: -12px; /* ancho de la punta */
  border-right: 12px solid var(--c-yellow);
}

.chip--yellow::after {
  right: -12px; /* ancho de la punta */
  border-left: 12px solid var(--c-yellow);
}
.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;               /* centra el contenido */
  align-items: center;
  justify-content: center;
  overflow: hidden;            /* evita que la imagen se salga */
  margin: 8px auto;            /* centrado y margen opcional */
}

.icon--pink { background: #ECABAF; }
.icon--yellow { background: var(--c-yellow); }

.icon-circle img {
  max-width: 60%;      /* tamaño de la imagen dentro del círculo */
  height: auto;
  object-fit: contain; /* evita deformaciones */
}
/* Desktop: igual a como lo tienes ahora */
.hero__right .embed-card { block-size: var(--hero-panel-h); }
.hero__right .fixed-frame { flex:1; min-height:0; overflow:hidden; border-radius:16px; }
.hero__right .fixed-frame iframe { width:100%; height:100%; display:block; }

/* Tablet: deja crecer en alto automáticamente */
@media (max-width:1024px){
  .hero__right .embed-card{ block-size:auto; }
  .hero__right .fixed-frame iframe{
    height: 72vh;         /* alto “grande”, pero no pantalla completa */
    min-height: 520px;    /* por si la vh queda corta */
  }
}

/* Móvil: que se vea cómodo sin ser pantalla completa */
@media (max-width:768px){
  .hero__right .fixed-frame iframe{
    height: 80vh;         /* ajusta aquí si lo quieres más/menos alto */
    min-height: 560px;    /* asegura legibilidad */
  }
}
/* Redes sociales con imágenes personalizadas */
.social.social--img {
  display: flex;
  gap: 16px;           /* separación entre logos */
  align-items: center;
}

.social.social--img a img {
  width: 40px;         /* tamaño fijo */
  height: 40px;
  display: block;
  object-fit: contain; /* respeta proporción */
  transition: transform .2s ease, filter .2s ease;
}

/* Efecto hover */
.social.social--img a:hover img {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* Responsive */
@media (max-width: 768px) {
  .footer__content {
    flex-wrap: wrap;
    row-gap: 12px;
    justify-content: center;
  }
  .footer__content .brand {
    order: 1;
  }
  .footer__content .social--img {
    order: 2;
  }
}<aside class="hero__right" aria-labelledby="consultaTitle">
  <div class="embed-card">
    <div class="embed-card__frame fixed-frame" role="region" aria-label="Módulo de consulta por NIT">
      <iframe
        title="Consulta por NIT"
        loading="lazy"
        src="https://app.powerbi.com/view?r=eyJrIjoiMTMwZjhhNWEtYTM2YS00MGI0LTk0YjItNGQxNWFhM2M5OTU0IiwidCI6IjYwOTBlMjE2LTY4YzUtNDMyNS04OTU4LTQxNjUyOTQ4YTNiYSJ9"
        frameborder="0"
        allow="fullscreen; clipboard-write"
        allowfullscreen
        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
        style="width:100%;height:100%;display:block;"
      ></iframe>
    </div>
  </div>
</aside>
/* === Altura única del panel en desktop, 19:9 “efectivo” === */
:root{
  /* alto objetivo para ambos paneles en desktop */
  --hero-panel-h: 620px; /* ajusta si lo quieres un poco más o menos alto */
}

/* Grilla del hero (ya la tienes) */
.hero__grid{ display:grid; grid-template-columns:62% 38%; gap:18px; }

/* Contenedor del video (sustituye al carousel) */
.hero__media{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  block-size: var(--hero-panel-h); /* MISMA altura que el embed-card */
}

/* Video o iframe ocupando todo el contenedor */
.hero__media > video,
.hero__media > iframe{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;       /* rellena sin deformar */
  object-position:center; /* recorte centrado */
}

/* Overlay suave (opcional, como el slider) */
.hero__overlay{
  position:absolute; inset:0;
  
  mix-blend-mode:multiply; pointer-events:none;
}

/* El panel derecho conserva la misma altura en desktop */
.embed-card{
  block-size: var(--hero-panel-h);
  display:flex; flex-direction:column;
}
.fixed-frame{ flex:1; min-height:0; overflow:hidden; border-radius:16px; }

/* ===== Responsivo ===== */
/* Tablet: dejamos crecer por ratio 19:9 y apilamos */
@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; gap:14px; }
  .hero__right{ order:-1; }            /* embed arriba */
  .hero__media{
    block-size:auto;                   /* deja de forzar altura fija */
    aspect-ratio: 19 / 9;              /* respeta 19:9 en tablet/móvil */
  }
  .embed-card{
    block-size:auto;
  }
  .fixed-frame iframe{
    /* altura razonable bajo el video en tablet */
    height:520px;
  }
}

/* Móvil: más compacto; el video sigue 19:9, BI más corto */
@media (max-width:768px){
  .hero__media{ aspect-ratio: 19 / 9; }
  .fixed-frame iframe{ height:440px; } /* ajusta si quieres más/menos */
}
/* Evitar scroll lateral accidental */
html, body { width:100%; overflow-x:hidden; }

/* iOS: usa dvh para alturas en móvil */
@media (max-width:1024px){
  .hero__right .fixed-frame iframe{ height:72dvh; min-height:520px; }
}
@media (max-width:768px){
  .hero__right .fixed-frame iframe{ height:80dvh; min-height:560px; }
}

/* El contenedor del video: respeta 19:9 en tablet/móvil */
@media (max-width:1024px){
  .hero__media{ aspect-ratio:19/9; block-size:auto; }
}

@media (max-width:768px){
  .pair, .badge { position:static !important; inset:auto !important; transform:none !important; margin-top:12px; }
}
/* === Opciones: evitar desbordes en móvil === */
.option-row{
  display:grid;
  grid-template-columns: auto 1fr auto; /* icono | texto flexible | flecha */
  gap:16px;
  align-items:center;
  padding:18px;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  overflow:hidden;             /* recorta cualquier fuga visual */
}

.option-row > *{ min-width:0; } /* habilita que el texto pueda encogerse */

.icon-circle{ margin:0; flex:0 0 56px; } /* que no crezca ni meta márgenes raros */

.row-text{
  min-width:0;                 /* importante para que el texto no empuje */
}
.row-text strong{ display:block; }
.row-text span{
  display:block;
  white-space:normal;
  overflow-wrap:anywhere;      /* permite cortar largas direcciones */
  word-break:break-word;
}

.arrow{
  justify-self:end;            /* se pega al borde derecho del grid */
  width:28px; height:28px;
}

/* En pantallas muy pequeñas: ocultar la flecha si el espacio es crítico */
@media (max-width:480px){
  .option-row{
    grid-template-columns: auto 1fr auto;
    gap:12px;
    padding:16px;
  }
  .arrow{ width:24px; height:24px; }
}

/* Si aún tienes scroll lateral en esta sección, como red de seguridad: */
.options-grid{ overflow-x:hidden; }
.sublist {
  list-style-type: disc; /* o circle, square, etc. */
  margin-top: 6px;
  margin-left: 1.5em;
  font-weight: normal; /* ejemplo: evitar negritas heredadas */
}

.sub-items {
  margin-left: 1.5em;
  line-height: 1.4;
}