/* ==========================================================================
   CÁRGALO YA SAS — Hoja de estilos
   Paleta tomada del logo: azul marino + verde del rastro del camión.
   ========================================================================== */

:root{
  --navy-900:#14163F;
  --navy:#262A6B;
  --navy-600:#3A3F8F;
  --green:#6FB43F;
  --green-600:#58982E;
  --green-050:#EDF6E4;
  --paper:#F4F5F9;
  --ink:#1B1D33;
  --muted:#5F6480;
  --line:#E3E5ED;
  --white:#fff;

  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(20,22,63,.06), 0 8px 24px rgba(20,22,63,.06);
  --shadow-lg:0 18px 48px rgba(20,22,63,.14);

  --wrap:1160px;
  --bar-h:0px;

  --step--1:clamp(.82rem,.79rem + .12vw,.88rem);
  --step-0:clamp(1rem,.96rem + .18vw,1.075rem);
  --step-1:clamp(1.18rem,1.1rem + .38vw,1.4rem);
  --step-2:clamp(1.45rem,1.3rem + .7vw,1.9rem);
  --step-3:clamp(1.8rem,1.5rem + 1.4vw,2.7rem);
  --step-4:clamp(2.1rem,1.6rem + 2.4vw,3.6rem);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  padding-bottom:var(--bar-h);
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.025em;
  color:var(--navy-900);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);letter-spacing:-.015em}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}

:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section--paper{background:var(--paper)}
.section--navy{background:var(--navy-900);color:#D9DBEC}
.section--navy h2,.section--navy h3{color:var(--white)}
.lead{font-size:var(--step-1);color:var(--muted);max-width:62ch}
.section--navy .lead{color:#B9BDDA}
.center{text-align:center}
.center .lead{margin-inline:auto}
.narrow{max-width:70ch;margin-inline:auto}

/* --- Rastro del camión: el elemento gráfico de la marca ------------------- */
.trail{display:flex;align-items:center;gap:5px;margin-bottom:1.1rem}
.trail span{
  display:block;height:7px;border-radius:2px;background:var(--green);
  animation:trail-in .5s cubic-bezier(.2,.7,.3,1) both;
}
.trail span:nth-child(1){width:10px;opacity:.35;animation-delay:.02s}
.trail span:nth-child(2){width:18px;opacity:.6;animation-delay:.08s}
.trail span:nth-child(3){width:34px;animation-delay:.14s}
.center .trail{justify-content:center}
@keyframes trail-in{from{opacity:0;transform:translateX(-14px)}}

.eyebrow{
  font-size:var(--step--1);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-600);margin:0 0 .6rem;
}
.section--navy .eyebrow{color:var(--green)}

/* --- Botones -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:.85rem 1.6rem;
  font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.01em;
  border-radius:var(--radius-sm);border:2px solid transparent;
  cursor:pointer;text-align:center;text-decoration:none;
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 4px 6px rgba(20,22,63,.05);
}
.btn:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 10px 20px rgba(20,22,63,.1)}
.btn:active{transform:translateY(-1px)}
.btn svg{width:22px;height:22px;flex:none;fill:currentColor;transition:transform .25s ease}
.btn:hover svg{transform:scale(1.1)}

.btn--wa{background:linear-gradient(135deg, var(--green) 0%, var(--green-600) 100%);color:var(--white);box-shadow:0 6px 20px rgba(111,180,63,.4);border:1px solid rgba(255,255,255,.1)}
.btn--wa:hover{background:linear-gradient(135deg, #7ec24a 0%, var(--green-600) 100%);color:var(--white);box-shadow:0 10px 25px rgba(111,180,63,.55)}

.btn--call{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--call:hover{background:var(--navy);color:var(--white);box-shadow:0 6px 20px rgba(38,42,107,.25)}
.section--navy .btn--call,.hero .btn--call{color:var(--white);border-color:rgba(255,255,255,.55)}
.section--navy .btn--call:hover,.hero .btn--call:hover{background:var(--white);color:var(--navy-900);box-shadow:0 10px 25px rgba(255,255,255,.3);border-color:var(--white)}

.actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.6rem}
.center .actions{justify-content:center}
.actions--stack{margin-top:2.2rem}

.note{font-size:var(--step--1);color:var(--muted);margin-top:.9rem}
.hero .note,.section--navy .note{color:#B9BDDA}

/* Estado de atención */
.status{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--step--1);font-weight:600;margin-top:.9rem}
.status .dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
.status.is-closed .dot{background:#E0A31C}
.is-closed .btn--call{opacity:.6}

/* --- Cabecera ------------------------------------------------------------- */
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header__inner{display:flex;align-items:center;gap:1rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.brand:hover{text-decoration:none}
.brand img{width:52px;height:52px;object-fit:contain}
.brand b{display:block;font-weight:800;font-size:1.02rem;color:var(--navy-900);line-height:1.15;letter-spacing:-.02em}
.brand small{display:block;font-size:.72rem;color:var(--muted);letter-spacing:.04em}

.nav{display:flex;align-items:center;gap:1.5rem}
.nav a{font-size:.94rem;font-weight:600;color:var(--navy-900)}
.nav a:hover{color:var(--green-600);text-decoration:none}
.nav a[aria-current="page"]{color:var(--green-600)}
.header .btn{min-height:46px;padding:.5rem 1.15rem;font-size:.9rem}
.header .btn--head{color:var(--white) !important}

.burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white);cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:var(--navy-900);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy-900)}
.burger span::before{top:-6px}
.burger span::after{top:6px}

@media (max-width:960px){
  .burger{display:flex}
  .header .btn--head{display:none}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);border-bottom:1px solid var(--line);
    padding:.5rem 1.25rem 1.25rem;display:none;box-shadow:var(--shadow);
  }
  .nav.is-open{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:1rem}
}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;background:var(--navy-900);color:#D9DBEC;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,var(--navy-900) 42%,rgba(20,22,63,.72) 68%,rgba(20,22,63,.45) 100%);
}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero__inner{position:relative;z-index:2;padding:clamp(3.2rem,7vw,6rem) 0 clamp(2.6rem,5vw,4rem);max-width:44rem}
.hero h1{color:var(--white)}
.hero__sub{font-size:var(--step-2);font-weight:600;color:var(--white);letter-spacing:-.02em;line-height:1.25;margin:0 0 .8rem}
.hero__kicker{font-size:var(--step-1);color:#C3C7E4;margin:0}

.marks{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14);
}
.marks div{background:var(--navy-900);padding:1.15rem .9rem;text-align:center}
.marks b{display:block;font-size:1.35rem;font-weight:800;color:var(--white);letter-spacing:-.02em}
.marks span{font-size:.8rem;color:#A9AED2;line-height:1.35;display:block}
@media (max-width:640px){
  .marks{grid-template-columns:1fr}
  .marks div{display:flex;align-items:baseline;justify-content:center;gap:.5rem;text-align:center;padding:.85rem}
  .marks b{font-size:1.1rem}
}

/* --- Tarjetas ------------------------------------------------------------- */
.grid{display:grid;gap:1.25rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--muted);font-size:.96rem}
.card__icon{width:46px;height:46px;border-radius:11px;background:var(--green-050);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.card__icon svg{width:24px;height:24px;stroke:var(--green-600);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Pasos: aquí la numeración sí informa, es una secuencia real */
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;position:relative}
.step b{display:block;font-size:.78rem;font-weight:800;letter-spacing:.16em;color:var(--green-600);margin-bottom:.7rem}
.step h3{font-size:1.05rem;margin-bottom:.35rem}
.step p{color:var(--muted);font-size:.94rem;margin:0}

/* Servicios */
.tags{display:flex;flex-wrap:wrap;gap:.7rem}
.tags li{
  list-style:none;background:var(--white);border:1px solid var(--line);
  border-radius:100px;padding:.7rem 1.25rem;font-weight:600;font-size:.95rem;color:var(--navy-900);
}
.section--paper .tags li{background:var(--white)}

/* Lista con marcas del rastro */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.checks li{position:relative;padding-left:2.1rem;color:var(--ink)}
.checks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:22px;height:6px;border-radius:2px;
  background:linear-gradient(90deg,rgba(111,180,63,.35) 0 6px,transparent 6px 9px,rgba(111,180,63,.7) 9px 15px,transparent 15px 18px,var(--green) 18px 22px);
}

/* Opciones dedicado / compartido */
.options{display:grid;grid-template-columns:1.15fr 1fr;gap:1.25rem;align-items:start}
@media (max-width:800px){.options{grid-template-columns:1fr}}
.option{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem}
.option--main{border:2px solid var(--green);box-shadow:var(--shadow-lg);position:relative}
.option__tag{display:inline-block;background:var(--green);color:var(--white);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .75rem;border-radius:100px;margin-bottom:.9rem}

/* --- Acordeón de preguntas ------------------------------------------------ */
.faq{max-width:52rem;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-weight:700;color:var(--navy-900);font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.55rem;width:11px;height:11px;
  border-right:2.5px solid var(--green-600);border-bottom:2.5px solid var(--green-600);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.9rem}
.faq p{padding:0 1rem 1.3rem 0;color:var(--muted);margin:0}

/* --- Testimonios ---------------------------------------------------------- */
.reviews-empty{
  border:2px dashed var(--line);border-radius:var(--radius);
  padding:2.5rem 1.5rem;text-align:center;color:var(--muted);max-width:44rem;margin-inline:auto;
}

/* --- Aliados -------------------------------------------------------------- */
.allies{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center;justify-content:center;margin-top:1.8rem}
.allies span{font-weight:700;color:var(--muted);letter-spacing:.04em;font-size:1.05rem}

/* --- Contacto ------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
@media (max-width:820px){.contact{grid-template-columns:1fr}}
.datalist{list-style:none;padding:0;margin:0;display:grid;gap:1.4rem}
.datalist dt,.datalist b{display:block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-600);margin-bottom:.2rem}
.datalist a{font-weight:600}
.map{border:0;width:100%;height:340px;border-radius:var(--radius);filter:grayscale(.25)}

/* --- Legales -------------------------------------------------------------- */
.legal{padding:clamp(2.5rem,6vw,4.5rem) 0}
.legal .wrap{max-width:52rem}
.legal h2{font-size:var(--step-2);margin-top:2.4rem}
.legal h3{font-size:var(--step-1);margin-top:1.8rem}
.legal ul{padding-left:1.2rem;color:var(--ink)}
.legal li{margin-bottom:.5rem}
.legal__meta{font-size:var(--step--1);color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:1.5rem;margin-bottom:1rem}
.page-head{background:var(--paper);border-bottom:1px solid var(--line);padding:clamp(2.5rem,6vw,4rem) 0}
.page-head p{color:var(--muted);max-width:60ch;margin:0}

/* --- Pie ------------------------------------------------------------------ */
.footer{background:var(--navy-900);color:#A9AED2;padding:clamp(3rem,6vw,4.5rem) 0 2rem;font-size:.94rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem}
@media (max-width:800px){.footer__grid{grid-template-columns:1fr;gap:2rem}}
.footer h4{color:var(--white);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.footer a{color:#A9AED2}
.footer a:hover{color:var(--green)}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.footer__brand img{width:64px;background:var(--white);border-radius:10px;padding:5px;margin-bottom:1rem}
.footer__legal{border-top:1px solid rgba(255,255,255,.13);margin-top:2.5rem;padding-top:1.5rem;font-size:.85rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between}

/* --- Barra fija móvil + botón flotante ------------------------------------ */
.bar{
  display:none !important;
}

.float{
  position:fixed;right:20px;bottom:24px;z-index:65;
  width:60px;height:60px;border-radius:50%;
  background:var(--green);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(111,180,63,.45);
  animation:floatBounce 3s ease-in-out infinite;
  transition:background .2s ease;
}
.float svg{width:32px;height:32px;fill:currentColor;transition:transform .2s ease}
.float:hover{background:var(--green-600);text-decoration:none}
.float:hover svg{transform:scale(1.1)}
.float::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--green);opacity:.5;animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.9);opacity:.55}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@keyframes floatBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* --- Tooltip Botón Flotante WhatsApp --- */
.float__tooltip {
  position: absolute; right: 75px;
  background: var(--white); color: var(--navy-900);
  padding: 0.6rem 1.1rem; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 700;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  transform: translateX(10px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s ease;
  pointer-events: none;
}
.float__tooltip::after {
  content: ""; position: absolute; right: -6px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--white);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.float.show-tooltip .float__tooltip {
  opacity: 1; visibility: visible;
  transform: translateX(0);
}
@media (max-width:600px){
  .float{right:16px;bottom:18px;width:56px;height:56px}
  .float svg{width:28px;height:28px}
  .float__tooltip{right:68px;font-size:0.82rem;padding:0.5rem 0.85rem}
}

/* --- Aparición al hacer scroll -------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* --- Aviso de cookies ----------------------------------------------------- */
.cookies{
  position:fixed;z-index:80;left:1rem;right:1rem;bottom:1rem;
  max-width:34rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:1.4rem;
}
.cookies p{font-size:.9rem;color:var(--muted);margin:0 0 1rem}
.cookies__btns{display:flex;gap:.6rem;flex-wrap:wrap}
.cookies .btn{min-height:46px;padding:.5rem 1.1rem;font-size:.88rem;flex:1 1 auto;box-shadow:none}
@media (max-width:820px){.cookies{bottom:calc(80px + 1rem)}}

/* --- Correcciones de contexto --------------------------------------------- */
.actions--stack{justify-content:center}
.hero .status,.section--navy .status{color:#C3C7E4}
.hero .status.is-closed,.section--navy .status.is-closed{color:#E8C778}
.card.center .card__icon{margin-inline:auto}
.legal p a,.footer__legal a{text-decoration:underline}

/* --- Galería --- */
.gallery__item {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  transition: transform .2s ease;
  background: var(--navy-900);
}
.gallery__item:hover {
  transform: scale(1.02);
}
.gallery__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* --- Aliados --- */
.allies-section {
  background: var(--paper);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.allies-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
}
.allies-title {
  font-weight: 600;
  color: var(--muted);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.allies-logos {
  display: flex;
  align-items: center;
  gap: 1.5rem 3.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.allies-logos img {
  height: 28px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: all .2s ease;
}
.allies-logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* --- Barra Legal de Confianza --- */
.legal-bar {
  background: var(--green-050);
  color: var(--green-600);
  font-size: var(--step--1);
  padding: 0.45rem 0;
  text-align: center;
  border-bottom: 1px solid rgba(111, 180, 63, 0.15);
}
.legal-bar__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  line-height: 1.4;
}
.legal-bar__sep {
  color: var(--green);
  opacity: 0.6;
}
@media (max-width: 600px) {
  .legal-bar__sep {
    display: none;
  }
  .legal-bar__inner {
    flex-direction: column;
    gap: 0.2rem;
  }
}

/* --- Widget de Reseñas de Google --- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.6rem;
}
@media (max-width: 900px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}
.review-card {
  background: var(--white);
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(20,22,63,.04);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.review-card__header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
}
.review-card__meta h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.review-card__meta span {
  font-size: 0.78rem;
  color: var(--muted);
}
.review-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}
.review-card__stars svg {
  width: 16px;
  height: 16px;
  fill: #FFB300;
}
.review-card__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  font-style: italic;
}
.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.8rem;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  justify-content: center;
  width: 100%;
}
.google-badge svg {
  width: 16px;
  height: 16px;
}

/* --- Hero con Video Lateral responsivo --- */
.hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem 2rem;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__grid .marks {
  grid-column: 1 / -1;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .hero {
    text-align: center;
  }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 1.5rem;
  }
  .hero__grid .hero__inner {
    padding-bottom: 0;
    order: 1;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero .trail {
    justify-content: center;
  }
  .hero .actions {
    justify-content: center;
  }
  .hero .status {
    justify-content: center;
  }
  .hero .note {
    text-align: center;
  }
  .hero__grid .marks {
    order: 2;
    margin-top: 0;
  }
  .hero__grid .hero__video-wrapper {
    order: 3;
  }
}
.hero__video-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.video-container {
  width: 100%;
  max-width: 290px;
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: #000;
}
.video-iframe {
  width: 100%;
  height: 100%;
  display: block;
}