/* === Pilota: CSS mínimo + paleta sobria (LIMPIO) === */
/* No pisa Bootstrap. Navbar SIEMPRE visible. Tipos grandes en hero/sections. */

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

/* Intro centrada */
.container1 {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 1rem; width: 100%; max-width: 38ch; margin: 0 auto;
}
.container1 img { max-width: 100%; height: auto; }

/* Botón de la intro */
#playButton {
  background: transparent; color: #666; border: 1px solid #fff;
  font-size: 40px; padding: 10px 30px; margin-top: 10px; cursor: pointer;
}
#playButton:hover { border: 1px solid #778B92; }

/* ===== Paleta seria (Deep Navy + Cyan) ===== */
:root{
  --brand-bg: #0F172A;      /* nav oscuro */
  --brand-bg-hover: #0B1220;
  --accent:   #06B6D4;      /* cian técnico */
  --accent-dark:#0891B2;
  --nav-h:    64px;         /* se ajusta por JS */
}

/* Utilidad de color de acento */
.text-accent { color: var(--accent) !important; }

/* Navbar y empuje del body para no tapar el hero */
.bg-brand{ background-color: var(--brand-bg) !important; }
body{ padding-top: var(--nav-h); }

/* ===== HERO ===== */
#hero{
  position: relative;
  min-height: calc(100svh - var(--nav-h)); /* svh = viewport real en móvil */
  background:#fff;
}
#hero .brand-wordmark{ max-width:315px; height:auto; }

/* Bullets responsivos */
.bullet-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5rem; }
@media (max-width:575.98px){ .bullet-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* Tipografía hero grande y sobria en desktop */
@media (min-width:1200px){
  #hero h1{ font-size:3.9rem; }
  #hero .hero-sub{ font-size:1.25rem; }
}

/* Subrayado de acento bajo el H1 */
.accent-underline{ position:relative; display:inline-block; }
.accent-underline::after{
  content:""; position:absolute; left:0; bottom:-10px;
  width:72px; height:3px; background:var(--accent); border-radius:2px;
}

/* Botón scroll-down centrado abajo del hero */
html { scroll-behavior: smooth; }
.scroll-down {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2;
}
.scroll-down a {
  display: inline-flex; width: 48px; height: 48px; border-radius: 999px;
  align-items: center; justify-content: center; background: #fff;
  border: 1px solid #e5e7eb; box-shadow: 0 6px 18px rgba(15,23,42,.08); text-decoration: none;
}
.scroll-down i { font-size: 1.25rem; color: var(--accent); animation: hero-bounce 1.6s ease-in-out infinite; }
.scroll-down a:hover { border-color: var(--accent); }
@keyframes hero-bounce {
  0%,20%,50%,80%,100%{ transform: translateY(0); }
  40%{ transform: translateY(6px); }
  60%{ transform: translateY(3px); }
}

/* ===== Card derecha del hero ===== */
.hero-scope-card { border-top: 4px solid var(--accent); font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.25rem); line-height: 1.6; }
.hero-scope-card .lead-sm{ font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.35rem); line-height: 1.6; margin-bottom: .25rem; }
.hero-scope-card .h6, .hero-scope-card h3{
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem) !important; line-height: 1.35; margin-bottom: .25rem;
}
/* Badges pill */
.pill-badge{
  background: #f8fafc; border: 1px solid #e5e7eb; color: #0f172a;
  padding: .6rem .9rem; border-radius: 999px; font-weight: 600; font-size: 1rem;
}
.pill-badge i{ color: var(--accent); }
/* Lista de highlights del hero */
.hero-scope-card .feature-list li{ margin-top: .4rem; }
.hero-scope-card .feature-list i{ font-size: 1.1em; vertical-align: -1px; }

/* ===== Secciones a pantalla completa ===== */
.section-full {
  display: flex; align-items: center;
  padding-block: clamp(2.5rem, 6vh, 5rem);
  background: #fff;
}
@media (max-height: 720px) { .section-full { min-height: auto; } }

/* ===== SOLUTIONS ===== */
#soluciones {
  font-size: clamp(1.0625rem, 0.95rem + 0.7vw, 1.25rem); line-height: 1.65;
}
#soluciones h2 { font-size: clamp(2rem, 1.25rem + 2.5vw, 3.25rem); line-height: 1.15; }
#soluciones .card-body { padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); }
#soluciones .solution-card i.fa-seedling, #soluciones .solution-card i.fa-ship { font-size: 1.5rem; }
#soluciones .feature-list li { font-size: 1.06em; margin-top: .5rem; }
#soluciones .feature-list i { vertical-align: -1px; font-size: 1.1em; }
#soluciones .metric-pill{
  background: #f8fafc; border: 1px solid #e5e7eb; color: #0f172a;
  padding: .7rem 1rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
}
#soluciones .metric-pill i{ color: var(--accent); }
@media (max-height: 720px) { #soluciones.section-full { min-height: auto; } }

/* ===== HOW IT WORKS (drone-focused) ===== */
#como-funciona{
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.2rem); line-height: 1.65;
}
#como-funciona h2{
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3.1rem); line-height: 1.15;
}
#como-funciona .card-body{ padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); }

/* Icono redondo sobrio */
.op-feature .icon-wrap{
  width: 48px; height: 48px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; background: #fff; border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(15,23,42,.05); color: var(--accent); font-size: 1.1rem;
}

/* Mini visual de ruta con waypoints: A → • → • → B */
.route-line{ display: flex; align-items: center; gap: .45rem; margin-top: .5rem; }
.route-line .point{
  width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #0f172a; background: #fff; border: 1px solid #e5e7eb;
}
.route-line .line{ flex: 1; height: 2px; background: var(--accent); border-radius: 2px; opacity: .9; }
.route-line .dot{
  width: 10px; height: 10px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(6,182,212,.15);
}

@media (max-height: 720px){ #como-funciona.section-full{ min-height: auto; } }

/* HOW IT WORKS: íconos más grandes y centrados */
.op-feature .icon-wrap{
  width: 64px;               /* antes: 48px */
  height: 64px;
  font-size: 1.4rem;         /* el <i> hereda este tamaño */
  margin: 0 auto .5rem;      /* centra el círculo y da aire abajo */
  display: flex;             /* ya estaba inline-flex; lo hacemos flex */
  align-items: center;
  justify-content: center;
}


@media (min-width: 1200px){
  .op-feature .icon-wrap{
    width: 72px;
    height: 72px;
    font-size: 1.6rem;
  }
}

/* ===== GALLERY ===== */
.gallery-heading{
  font-size: 0.9rem;
  letter-spacing: .12em;
  font-weight: 800;
  color: #0f172a;
  opacity: .75;
  margin-bottom: .75rem;
}

.gallery-item { margin: 0; }
.gallery-img{
  width: 100%;
  height: auto;                 /* sin recortes; respeta la ilustración */
  border: 1px solid #e5e7eb;    /* borde sutil */
  border-radius: 14px;          /* esquinas suaves */
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  background: #fff;
}

.gallery-caption{ line-height: 1.35; }

/* === GALLERY: tipografía al mismo tamaño que Solutions / How it works === */
#galeria{
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.2rem); /* ~17 → ~19px */
  line-height: 1.65;
}
#galeria h2{
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3.1rem);
  line-height: 1.15;
}

/* Subtítulos de grupo (DRONE PROTOTYPE / PORT OPERATIONS / GARDENING) un pelín mayores */
#galeria .gallery-heading{
  font-size: 1rem;            /* antes 0.9rem */
  letter-spacing: .14em;
}

/* Reach us: tamaños coherentes */
#contacto{
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.2rem);
  line-height: 1.65;
}
#contacto h2{
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3.1rem);
  line-height: 1.15;
}

/* Estado inicial: SOLO se ve .container1 (logo + botón) */
body.intro {
  padding-top: 0 !important;   /* sin espacio de navbar */
  overflow: hidden;             /* sin scroll */
}
body.intro .container1 { display: flex !important; min-height: 100svh; }
body.intro .container2 { display: none !important; }

/* Tras el click: oculta la intro y muestra el sitio */
body:not(.intro) .container1 { display: none !important; }
/* Fuerza a mostrarse aunque en el HTML tenga style="display:none" */
body:not(.intro) .container2 { display: block !important; }

/* Gallery: todas las imágenes con el mismo tamaño */
#galeria .gallery-img{
  width: 100%;
  aspect-ratio: 3 / 2;    /* ← cambia a 16/9, 4/3, 1/1 si prefieres */
  object-fit: cover;      /* recorta para llenar el cuadro sin deformar */
  display: block;         /* evita huecos extra */
}

/* Gallery: stack vertical a ancho completo para Port operations */
#galeria .gallery-stack .gallery-item { margin: 0 0 1.5rem 0; }

#galeria .gallery-stack .gallery-img{
  width: 100%;
  height: auto;          /* conserva proporción original */
  aspect-ratio: auto;    /* anula cualquier ratio fijo previo */
  object-fit: contain;   /* no recorta */
  display: block;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  background: #fff;
}

/* Para que .scroll-down se ancle al fondo de cada sección fullscreen */
.section-full { position: relative; }

/* Footer links: mismo color que el texto, sin azul Bootstrap */
footer .nav { gap: 1rem; }                  /* espaciado entre items */
footer .nav-link{
  color: inherit !important;                /* hereda el gris del contenedor */
  padding: 0;                               /* quita padding extra */
  opacity: 1;
  text-decoration: none;                    /* sin subrayado por defecto */
}
footer .nav-link:hover,
footer .nav-link:focus{
  color: inherit;                           /* no cambia de color al hover */
  text-decoration: underline;               /* subrayado sutil al hover */
}

/* Navbar: igual que antes, pero en blanco */
.navbar.bg-brand.navbar-dark .navbar-nav .nav-link{
  color: #fff !important;
  opacity: .92;              /* como el look original */
  font-weight: inherit;      /* sin negrita extra */
  text-decoration: none;     /* sin subrayado */
}

.navbar.bg-brand.navbar-dark .navbar-nav .nav-link:hover,
.navbar.bg-brand.navbar-dark .navbar-nav .nav-link:focus{
  color: #fff !important;
  opacity: 1;                /* un poquito más visible al hover */
  text-decoration: none;     /* sigue sin subrayado */
}

/* Pre-hero full-bleed image */
.prehero { position: relative; background: #000; }          /* fondo negro para evitar bordes al recortar */
.prehero.section-full { padding-block: 0; }                 /* sin padding vertical: imagen a tope */
.prehero .prehero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;                                        /* llena el viewport sin deformar */
  display: block;
}
.prehero .gallery-caption{ display: none; }                 /* oculta el caption en el banner */


/* Banner bajo la navbar: ocupa exactamente el alto visible y NO recorta */
#port-banner{
  padding-block: 0;
  background: #ffffff;                      /* color de fondo para las barras */
  overflow: hidden;                      /* evita desbordes raros */
  display: grid;                         /* centra con grid */
  place-items: center;
}


#port-banner figure{ margin: 0; }

#port-banner .prehero-img{
  width: 100%;
  height: 100%;
  object-fit: contain;                   /* ← muestra la imagen completa */
  object-position: center;               /* centrada */
  display: block;
}

/* Overlay de texto encima de la imagen del banner */
#port-banner { position: relative; } /* asegura contexto para el overlay */

.prehero-overlay{
  position: absolute;
  left: 50%;
  bottom: 76px;                        /* deja espacio para el botón ↓ */
  transform: translateX(-50%);
  z-index: 2;

  max-width: min(960px, 92vw);
  padding: .85rem 1.1rem;
  text-align: center;

  color: #fff;
  background: rgba(15,23,42,.85);      /* fondo oscuro translúcido */
  border-radius: .75rem;
  backdrop-filter: saturate(120%) blur(2px);

  font-size: clamp(1rem, .95rem + .4vw, 1.15rem);
  line-height: 1.5;
}

/* Asegura que el botón quede por encima también */
#port-banner .scroll-down{ z-index: 3; }

/* Si lo prefieres centrado en vertical, cambia bottom por 50% y añade translateY */
.prehero-overlay.center {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

/* --- Velo para legibilidad (igual que antes) --- */
#port-banner{ position: relative; }

/* --- Overlay estilo hero, pegado ABAJO --- */

.prehero-inner{
  max-width: min(980px, 92vw);
  color:#fff;
}

/* Tipografía de hero */
.prehero-inner h1{
  font-weight:800; letter-spacing:-.01em; line-height:1.1;
  margin:0 0 .5rem 0;
}
.prehero-inner .lead{
  line-height:1.6; opacity:.98; margin:0;
}

/* Asegura que el botón ↓ quede delante */
#port-banner .scroll-down{ z-index:3; }

/* (Opcional) un poco más estrecho para que “respire” */
#port-banner .prehero-inner{
  max-width: min(820px, 92vw);
}


/* Más aire vertical entre filas de bullets */
.bullet-grid {
  column-gap: .75rem;                             /* espacio horizontal */
  row-gap: clamp(.75rem, .8vw, 1.5rem);          /* espacio vertical */
}

/* Un pelín de padding por ítem para sumar aire */
.bullet-grid li {
  padding-block: .25rem;
}

/* (opcional) en pantallas grandes, aún más separación vertical */
@media (min-width: 1200px) {
  .bullet-grid { row-gap: 1.75rem; }
}

/* Imagen superpuesta y clicable en el prehero (esquina superior derecha) */
#port-banner { position: relative; }

/* Imagen */
.overlay-cta__img{
  width: clamp(56px, 8vw, 96px);
  height: auto;
  display: block;
}

/* Etiqueta “The Pilota” debajo */
.overlay-cta__caption{
  font-size: .9rem;
  font-weight: 700;
  color: #0f172a;
  background: #fff;                 /* legible sobre cualquier fondo */
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: .25rem .65rem;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}


/* Cards: respetar esquinas redondeadas */
.solution-card { overflow: hidden; }

/* Alto de la franja de imagen: mínimo 220px, escala con el ancho, máximo 580px */
.solution-card .solution-media{
  height: clamp(220px, 34vw, 580px);
  overflow: hidden;     
}

/* La imagen llena la franja (puede recortar) */
.solution-card .solution-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Asegura que el navbar queda por encima de cualquier cosa (incluida The Pilota) */
.navbar.fixed-top {
  z-index: 3001; /* > 1060 de la imagen */
}

/* ---- Overlay del pre-hero con posición fija (sin clamp) ---- */
#port-banner { position: relative; }   /* asegura el contexto */

.prehero-hero{
  position: absolute;
  right: 50px;           /* ← ajusta la posición */
  bottom: 165px;          /* ← ajusta la posición */
  z-index: 2;            /* por detrás del botón ↓ si lo tienes con z-index:3 */
  width: 680px;          /* ancho “seguro” en desktop */
  max-width: calc(100% - 80px); /* no se sale en pantallas estrechas */
  text-align: left;      /* como lo estabas usando */
  padding: 0;            /* sin padding con clamp */
}

/* Tipografías sin clamp */
.prehero-inner{ color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.prehero-inner h1{ font-size: 3rem; line-height: 1.1; margin: 0 0 .5rem; }
.prehero-inner .lead{ font-size: 1.125rem; line-height: 1.55; }

/* Grid de bullets con separación fija (sin que afecte la posición del bloque) */
.prehero-hero .bullet-grid{
  display: grid;
  grid-template-columns: repeat(3, auto);
  column-gap: 24px;
  row-gap: 12px;
  margin-top: 1rem;
}
.prehero-hero .bullet-grid li{ display:flex; align-items:center; }



/* ===== PRE-HERO limpio ===== */

/* El banner ocupa todo el alto visible y centra el figure */
#port-banner{
  display: grid;
  place-items: center;
  background: #fff;
  position: relative; /* para el botón ↓ y el CTA suelto */
  overflow: hidden;
}

/* El <figure> es el contenedor relativo de la IMAGEN */
#port-banner > figure{
  position: relative;   /* 🔑 ahora el overlay se ancla a la imagen */
  margin: 0;
  max-width: 100%;
  max-height: 100%;
}

/* La imagen se ajusta sin recortar */
.prehero-img{
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - var(--nav-h));
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Overlay de texto fijado respecto a la imagen (figure) */
.prehero-hero{
  position: absolute;
  right: -10px;            /* mueve el bloque a tu gusto */
  bottom: 70px;          /* idem */
  width: min(680px, calc(100% - 80px)); /* no se sale en estrecho */
  text-align: left;
  z-index: 2;
}

/* < 1500px: coloca el bloque más abajo y más a la derecha */
@media (max-width: 1500px){
  .prehero-hero{
    right: 24px;   /* antes ~70px → valor menor = más a la derecha */
    bottom: 60px;  /* antes ~165px → valor menor = más abajo */
  }
}


.prehero-inner{ color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.prehero-inner h1{ font-weight:800; line-height:1.1; font-size:3rem; margin:0 0 .5rem; }
.prehero-inner .lead{ font-size:1.125rem; line-height:1.55; }

/* Bullets solo dentro del overlay (no toco otros) */
.prehero-hero .bullet-grid{
  display:grid;
  grid-template-columns:repeat(3, auto);
  column-gap:24px; row-gap:12px;
  margin-top:1rem;
}
.prehero-hero .bullet-grid li{ display:flex; align-items:center;}

/* CTA “The Pilota” — sigue siendo relativo al banner (no a la imagen) */
.overlay-cta{
  position: absolute;
  top: calc(clamp(1rem, 4vw, 2.5rem) + 30px);
  right: clamp(1rem, 4vw, 2.5rem);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  text-decoration:none; z-index:3000;
}
.overlay-cta__img{ width:clamp(56px, 8vw, 96px); height:auto; display:block; }
.overlay-cta__caption{
  font-size:.9rem; font-weight:700; color:#0f172a; background:#fff;
  border:1px solid #e5e7eb; border-radius:999px; padding:.25rem .65rem;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}

/* Botón ↓ delante de todo */
#port-banner .scroll-down{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3; }

/* Imagen para features (sustituye a icon-wrap) */
.op-feature .feature-img{
  width: 100%;                 /* igual que el tamaño grande de icon-wrap */
  display: block;
  margin: 0 auto .5rem;        /* centrada y con aire abajo */
  object-fit: cover;           /* recorta sin deformar */
  border-radius: 12px;         /* quad-rounded (ajusta a 50% si la quieres circular) */
  border: 1px solid #e5e7eb;   /* mismo borde sutil que usas en cards/galería */
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}

/* Imagen debajo del texto, con borde y proporción consistente */
.op-feature .feature-illustration{
  padding: .75rem;                 /* aire alrededor */
}
.op-feature .feature-illustration img{
  width: 100%;
  height: auto;                    /* o usa una proporción fija: */
  display: block;
  border-radius: .75rem;
}

/* Si prefieres mantener una altura uniforme: */
@supports (aspect-ratio: 1){
  .op-feature .feature-illustration img{
    aspect-ratio: 4 / 3;           /* cámbialo a 1/1, 16/9, etc. */
    object-fit: contain;           /* no recorta ilustraciones */
    background: #fff;
  }
}

/* El contenedor sigue el tamaño de la imagen */
.prehero .hotspot {
  position: relative;
  display: inline-block;        /* asegura que envuelva a la imagen */
  line-height: 0;               /* evita espacios fantasma */
}

/* Los hotspots deben estar por encima del overlay del hero */
.music {
  z-index: 3002;     /* > que .prehero-hero (z-index:2) y el scroll-down (3 si hace falta sube a 3003) */
  border: 0;
  cursor: pointer;
}


.hotspot-btn{
  position:absolute;
  left:var(--x);            /* % del ancho visible */
  top:var(--y);             /* % del alto visible */
  width:var(--w);
  height:var(--h);
  transform:translate(-50%,-50%); /* posiciona por el centro */
  background: rgba(212, 6, 57, 0.3); border:1px dashed #06B6D4;
  border-radius:50%;
  opacity: 0;
}

/* El wrapper de hotspots DEBE ocupar la franja completa */
.solution-card .solution-media .hotspot{
  position: relative;
  width: 100%;
  height: 100%;                    /* 🔑 sin esto aparece el hueco */
  display: block;
  line-height: 0;
  border-radius: inherit;
  overflow: hidden;
}

/* La imagen llena y se recorta dentro de la franja */
.solution-card .solution-media .hotspot > img{
  width: 100%;
  height: 100%;                    /* 🔑 clave */
  object-fit: cover;               /* cover en estas cards */
  display: block;
  border-radius: inherit;
}








/* PRUEBA */

/* Contenedor base */
.prehero-hero {
  max-width: 1100px;
  margin-inline: auto;
  padding: 2em;        /* usa em para que también escale */
  font-size: 100%;     /* 100% = escala 1 */
}

/* Tipografías en em para que respeten la escala del contenedor */
.prehero-hero h1 {
  font-size: 2.6em;    /* ≈ 2.6 × font-size del contenedor */
  line-height: 1.1;
  margin: 0 0 .6em 0;
}

.prehero-hero .lead {
  font-size: 1.25em;
  line-height: 1.4;
}

.bullet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22em, 1fr));
  gap: 1em;
  margin: 1.2em 0 0 0;
  padding: 0;
}

.bullet-grid li {
  font-size: 1.05em;
  display: flex;
  align-items: center;
}

.bullet-grid i {
  font-size: 1.2em !important;  /* mejor quita .fa-xl del HTML */
  margin-right: .5em;
}

/* ESCALAS POR BREAKPOINTS (reducción) */
@media (max-width: 1320px) {
  .prehero-hero { font-size: 90%; }   /* 50% del tamaño original */

  .prehero-hero {
    right: 0;
    bottom: 60px;
}
}

@media (max-width: 1200px) {
  .prehero-hero { font-size: 85%; }   /* 50% del tamaño original */

  .prehero-hero {
    right: -5px;
    bottom: 60px;
    max-width: 650px;
}
}

@media (max-width: 1100px) {
  .prehero-hero { font-size: 80%; }   /* 50% del tamaño original */

  .prehero-hero {
    right: -35px;
    bottom: 60px;
    max-width: 600px;
}
}

@media (max-width: 1000px) {
  .prehero-hero { font-size: 80%; }   /* 50% del tamaño original */

  .prehero-hero {
    right: -25px;
        bottom: 30px;
        max-width: 550px;
}

.scroll-down a {
    width: 32px;
    height:32px;
  }

  .scroll-down i {
    font-size:0.7rem;
  }
}

@media (max-width: 800px) {

  .bullet-grid > li { margin-bottom: .15rem !important; }

  .scroll-down a {
    width: 24px;
    height:24px;
  }

  .scroll-down i {
    font-size:0.8rem;
  }

   .bullet-grid {
    column-gap: 0 !important;
    row-gap: 0 !important;
    gap: .4rem !important;

  }

  .overlay-cta{
    top: calc(clamp(.1rem, 2vw, 2.5rem));
    right: clamp(.1rem, 2vw, 2.5rem);
}
  /* Imagen */
.overlay-cta__img{
  width: clamp(48px, 8vw, 96px);
  height: auto;
  display: block;
}

/* Etiqueta “The Pilota” debajo */
.overlay-cta__caption{
  font-size: .7rem;
  font-weight: 700;
  color: #0f172a;
  background: #fff;                 /* legible sobre cualquier fondo */
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: .25rem .65rem;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
  
}

@media (max-width: 576px) {
  .scroll-down {
    display: none;
  }

  .bullet-grid > li { margin-bottom: .05rem !important; }

  .bullet-grid {
    column-gap: 0 !important;
    row-gap: 0 !important;
    gap: .2rem !important;
    margin:0 !important;

  }

    .scroll-down a {
    width: 18px;
    height:18px;
  }

  .scroll-down i {
    font-size:0.5rem;
  }


	.overlay-cta{
		top: calc(clamp(.1rem, 2vw, 2.5rem));
		right: clamp(.1rem, 2vw, 2.5rem);
	}
		/* Imagen */
	.overlay-cta__img{
		width: clamp(32px, 8vw, 96px);
		height: auto;
		display: block;
	}

	/* Etiqueta “The Pilota” debajo */
	.overlay-cta__caption{
		font-size: .5rem;
		font-weight: 700;
		color: #0f172a;
		background: #fff;                 /* legible sobre cualquier fondo */
		border: 1px solid #e5e7eb;
		border-radius: 999px;
		padding: .25rem .65rem;
		box-shadow: 0 6px 18px rgba(15,23,42,.08);
	}

}


@media (max-width: 800px) {
	#port-banner {
    overflow: visible;
		margin-bottom: 85px;
	}
	.prehero-hero {
		display: block;
    font-size: 50%;
		width: 100%;
		bottom: -77px;
		right: 0px;
  }
	.prehero-hero h1 {
		margin-bottom: 2px !important;
		text-shadow: 0 0px 10px rgba(0,0,0,.85);
		margin-left: 53%;
		font-size: 12px;
	}

	.prehero-hero .lead {
		display: block;
		margin-bottom: 26px !important;
		font-size: 11px;
		text-shadow: 0 0px 5px rgba(255, 255, 255, 1);
		margin-left: 53%;
		line-height: 13px;
		color: #222;
		font-weight: 600;
	}
	.prehero-hero .bullet-grid li {
		color: #6c757d !important;
		text-shadow: none;
    font-size: 11px;
	}
	.bullet-grid i {
		width: 20px;
	}
}