/* ============================================
   ÍCARO RB — Responsive
   ============================================ */

/* Las mismas flotaciones de animations.css pero SIN el translateX(-50%) que
   aquellas llevan dentro: en móvil las etiquetas del globo se colocan por su
   borde izquierdo, no por su centro, y un keyframe con transform gana siempre
   sobre la propiedad del elemento. */
@keyframes float-a-libre {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(6px, -10px); }
  66% { transform: translate(-4px, 6px); }
}
@keyframes float-b-libre {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-8px, 8px); }
  66% { transform: translate(5px, -6px); }
}
@keyframes float-c-libre {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(7px, 7px); }
  66% { transform: translate(-6px, -8px); }
}

@media (max-width: 1080px) {
  /* Stack the globe above the text; the left-bleed effect only reads
     well on wide viewports, so it collapses to a centered globe here */
  .about__visual {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding-top: 40px;
  }
  /* El globo NO se centra: sobresale por la izquierda igual que en escritorio.
     Centrado no cabía ninguna etiqueta a los lados (a 375px quedan 71px por
     lado y la más ancha mide 110), así que las tres acababan encima de la
     esfera. Sacándolo del encuadre se libera una columna de ~170px a su
     derecha, que es donde el diseño aprobado las pone. */
  .globe-wrap {
    position: relative;
    left: auto; top: auto; transform: none;
    align-self: flex-start;
    width: 62vw; max-width: 340px; min-width: 200px;
    margin: 0 0 40px -8vw;
  }
  /* Etiquetas FUERA de la esfera, siguiendo su curva. Se posicionan por el
     BORDE izquierdo, no por el centro, así que hay que apagar el
     `translateX(-50%)` que los keyframes float-* llevan dentro — de ahí las
     variantes "-libre".
     Los porcentajes salen de la circunferencia: para una etiqueta que ocupa
     de `top` a `top+15%`, el borde del círculo en su punto más ancho está en
     50% + sqrt(0.25 - dy²), con dy la distancia al ecuador del extremo más
     cercano. Da 94.4%, 100% y 95.8%; se redondea hacia fuera. */
  .country-pill { transform: none; }
  .country-pill--mx { left: 95%;  top: 12%; animation-name: float-a-libre; }
  .country-pill--hn { left: 100%; top: 41%; animation-name: float-b-libre; }
  .country-pill--gt { left: 96%;  top: 70%; animation-name: float-c-libre; }
  .about__text { margin-left: 0; max-width: 640px; padding: 0 var(--container-pad); text-align: center; }

  .quote__grid { grid-template-columns: 1fr; }
  .quote__text { text-align: center; }
  .quote__rule { margin: 28px auto; }
}

@media (max-width: 860px) {
  :root { --container-pad: 24px; --header-height: 78px; }

  .nav { position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 80vw);
    background: rgba(5,12,33,.97); backdrop-filter: blur(16px);
    transform: translateX(100%); transition: transform .45s var(--ease-smooth);
    display: flex; align-items: center; padding: 100px 40px; z-index: 400;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 28px; }
  .nav__link { font-size: 20px; }
  .btn--nav { display: none; }
  /* …y en su lugar entra dentro del propio menu, al final de la lista. */
  .nav__cta { display: block; margin-top: 12px; }
  .nav__toggle { display: flex; }
  .nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero__title { font-size: 34px; }
  .hero__content { max-width: 100%; }

  .clients__title { padding-left: 24px; font-size: 30px; }
  .marquee__item { height: 34px; }

  /* ---- La ilustracion de la ciudad, COMPLETA ----
     Es un retrato de 2749x4122. Con `cover` sobre una seccion de 2070px de
     alto y 375 de ancho el navegador la ampliaba 3.7x y solo quedaba a la
     vista la franja central: el 27% del ancho. La rueda de la fortuna partida
     por la mitad en el borde izquierdo, el barco y todo el skyline fuera de
     cuadro. Ahora el mapa toma la proporcion de la imagen y esta se dibuja a
     ancho completo, que es la unica forma de que no se corte: una foto 2:3 no
     entra sin recorte en un hueco de 1:5.5.
     La imagen pasa del fondo de .coverages (que empieza arriba del todo,
     detras del titulo) al propio mapa, para que empiece donde empiezan los
     pines. Las dos capas de degradado la funden con el color de la seccion
     por arriba y con el del contacto por abajo. */
  .coverages__bg { display: none; }
  .coverages__map {
    min-height: 0;
    aspect-ratio: 2749 / 4122;
    padding-bottom: 0;
    /* Sin margen: asi el borde inferior del mapa ES el de la seccion, y como
       su ultima franja ya es #04081A empalma exacto con .contact. Con 40px de
       margen quedaba una tira mas clara debajo — el degradado de .coverages
       aun no habia llegado a ese color — y se leia como una linea. */
    margin-bottom: 0;
    background-image:
      linear-gradient(180deg,
        #0B2860 0%, rgba(11, 40, 96, 0) 7%,
        rgba(4, 8, 26, 0) 72%, rgba(4, 8, 26, .7) 92%, #04081A 100%),
      url('../img/home/sky-texture.png');
    background-size: 100% 100%, 100% auto;
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
  }
  /* Con la imagen a su tamano real la escena es mas densa y las etiquetas
     caen sobre edificios claros; la sombra las despega sin oscurecer la foto
     (mismo recurso que en el timeline apilado de Nosotros). */
  .coverage-pin__label {
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(2, 6, 20, .9), 0 2px 12px rgba(2, 6, 20, .75);
  }
  .coverage-pin__plus { width: 40px; height: 40px; font-size: 18px; }
  .coverages__plane { width: 22%; left: 6%; }
  /* Al encoger el mapa a la proporcion de la foto, los porcentajes verticales
     del diseno de escritorio juntaban tres parejas de pines (vida/contratos y
     resp-civil/terrorismo se solapaban). Aqui va el segundo juego de verticales;
     la horizontal no cambia, para no mover lo que cada pin senala.
     Vive en CSS y no en la plantilla a proposito: Sucuri cachea el HTML pero
     los assets van versionados, asi que tras un despliegue conviven un rato el
     HTML viejo y el CSS nuevo. Si estas posiciones llegaran en el `style` de
     cada pin, durante esa ventana la hoja nueva encogeria el mapa sin recibir
     las verticales nuevas y los pines se solaparian. */
  .coverage-pin { top: var(--my, var(--y)); }
  .coverage-pin--aviacion { --my: 10%; }
  .coverage-pin--property { --my: 22%; }
  .coverage-pin--agricultura { --my: 34%; }
  .coverage-pin--energia { --my: 42%; }
  .coverage-pin--ingenieria { --my: 50%; }
  .coverage-pin--diversos { --my: 58%; }
  .coverage-pin--contratos { --my: 58%; }
  .coverage-pin--vida { --my: 66%; }
  .coverage-pin--resp-civil { --my: 74%; }
  .coverage-pin--terrorismo { --my: 82%; }
  .coverage-pin--maritimo { --my: 90%; }
  .coverage-pin--transporte { --my: 90%; }

  /* Los tres pines de la orilla derecha (76-82%) crecen hacia fuera y su
     etiqueta se salia de la pantalla (medido a 414px: hasta 464px de un
     viewport de 414). Se anclan por el borde DERECHO al mismo punto y la
     etiqueta se dibuja hacia la izquierda: el lugar que marcan no se mueve. */
  .coverage-pin--property,
  .coverage-pin--contratos,
  .coverage-pin--terrorismo {
    left: auto;
    /* Los 40px son el ancho del "+" en este breakpoint: al restarlos, el
       circulo queda exactamente donde estaba (su borde izquierdo en --x) y
       solo la etiqueta cambia de lado. */
    right: calc(100% - var(--x) - 40px);
    flex-direction: row-reverse;
  }

  /* Objetivo tactil de 24px (WCAG 2.2 AA). Los enlaces del pie median 17px
     de alto; el texto no cambia de tamano, solo crece su area pulsable. */
  .footer__nav a { padding: 4px 0; }

  /* Mismo motivo que en nosotros.css: .coverages sube 120px por el fundido
     cruzado y en movil se comia el final de la cita. */
  .quote { padding-bottom: 200px; }

  /* La pleca naranja bajo la cita se queda solo en escritorio: en movil el
     bloque ya esta centrado y el filete entre el texto y el boton no aporta
     jerarquia, la parte. */
  .quote__rule { display: none; }
  /* Esa pleca aportaba 28px de aire por arriba y por abajo; sin ella el boton
     quedo pegado al texto. El aire se devuelve al boton. */
  .quote__text .btn { margin-top: 36px; }

  .steps__list { grid-template-columns: 1fr; gap: 28px; }

  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact__title { font-size: 26px; }
}

@media (max-width: 520px) {
  .hero__title { font-size: 28px; }
  .hero__subtitle { font-size: 15px; }
  .btn--lg { padding: 15px 30px; font-size: 14px; }

  .country-pill { font-size: 11px; padding: 8px 16px; }
  .about__text p { font-size: 15px; }

  .quote__line { font-size: 24px; }

  .coverages__intro h2 { font-size: 24px; }

  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__nav { flex-direction: column; gap: 16px; }
}

/* A 320px el mapa mide 480px de alto (la proporcion de la foto) y las filas de
   pines caen cada 38px: menos que los 40px que mide un pin, asi que se tocaban
   —nueve parejas, medido—. Se encoge el pin, no la foto. */
@media (max-width: 359px) {
  .coverage-pin { gap: 10px; }
  .coverage-pin__plus { width: 32px; height: 32px; font-size: 16px; }
  .coverage-pin__label { font-size: 11px; }
  /* El ancla derecha resta el ancho del "+", que aqui ya no es 40px. */
  .coverage-pin--property,
  .coverage-pin--contratos,
  .coverage-pin--terrorismo { right: calc(100% - var(--x) - 32px); }
}

/* ============================================
   NOTA DE ORDEN DE CARGA
   --------------------------------------------
   Esta hoja se carga ANTES que las de página (nosotros.css, coberturas.css),
   así que cualquier regla de aquí que choque con una de ellas PIERDE por orden
   de fuente, con la misma especificidad. Por eso las secciones responsive de
   Nosotros y Coberturas viven al final de su propia hoja y no aquí: estuvieron
   meses sin aplicarse (el timeline nunca se apilaba en móvil) justo por esto.
   Aquí solo van reglas de lo que define styles.css.
   ============================================ */