/* =========================================
   Ajustes responsive
   1199px: compacta bloques amplios
   991px: cambia a layout tablet
   767px: prioriza movil
   ========================================= */
@media (max-width: 1199px) {
  /* Reduce columnas grandes cuando el ancho ya no alcanza para tres bloques. */
  .hero-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  /* Punto de quiebre tablet: el header y varias rejillas pasan a una columna. */
  .site-header .navbar {
    padding: 0.8rem 0;
  }

  .navbar-brand {
    max-width: calc(100% - 84px);
    margin-right: 0.75rem;
  }

  .navbar-toggler {
    padding: 0.5rem 0.65rem;
    border-radius: 14px;
    border-color: rgba(255, 255, 255, 0.18);
  }

  .navbar-collapse {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 24px;
    background: rgba(7, 15, 29, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar .nav-link {
    display: block;
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
  }

  .hero-section {
    min-height: auto;
    padding-top: 7.8rem;
    padding-bottom: 4rem;
  }

  .page-hero {
    padding-top: 7.7rem;
    padding-bottom: 2.8rem;
  }

  .hero-section h1 {
    max-width: none;
  }

  .page-hero h1 {
    max-width: none;
  }

  .page-hero-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .page-hero-media {
    justify-self: start;
    width: min(100%, 430px);
  }

  .page-hero-media img {
    aspect-ratio: 16 / 10;
  }

  .hero-panel {
    margin-top: 0.5rem;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .section-bridge-grid,
  .fleet-grid,
  .social-grid,
  .highlights-grid,
  .testimonial-grid,
  .feedback-grid,
  .company-data-grid,
  .summary-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  /* Punto de quiebre movil: se optimiza la experiencia para una sola mano. */
  body {
    padding-bottom: calc(5.8rem + env(safe-area-inset-bottom));
  }

  main section {
    scroll-margin-top: 92px;
  }

  .site-header .navbar {
    padding: 0.7rem 0;
  }

  .navbar-brand {
    max-width: calc(100% - 72px);
    gap: 0.75rem !important;
  }

  .logo-img {
    width: 52px;
    height: 52px;
  }

  .brand-copy strong {
    font-size: 1.15rem;
  }

  .brand-copy small {
    display: none;
  }

  .hero-section {
    padding-top: 7rem;
    padding-bottom: 3rem;
  }

  .page-hero {
    padding-top: 6.9rem;
    padding-bottom: 2.3rem;
  }

  .hero-section h1 {
    font-size: clamp(2.15rem, 9vw, 3rem);
    line-height: 1.02;
    letter-spacing: 0.01em;
  }

  .page-hero h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.04;
  }

  .page-hero p {
    font-size: 1rem;
  }

  .page-hero-layout {
    gap: 1.2rem;
  }

  .page-hero-media {
    width: 100%;
  }

  .page-hero-media img {
    border-radius: 22px;
  }

  .page-kicker-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .page-kicker-row span {
    width: 100%;
    justify-content: flex-start;
    padding: 0.75rem 0.9rem;
  }

  .section-tag {
    max-width: 100%;
    padding: 0.32rem 0.7rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .hero-badges,
  .hero-actions {
    width: 100%;
  }

  .hero-badges {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 1.35rem;
  }

  .hero-badges span {
    width: 100%;
    justify-content: flex-start;
    padding: 0.75rem 0.9rem;
    line-height: 1.25;
  }

  .hero-actions {
    gap: 0.75rem;
    margin-bottom: 1.35rem;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    padding: 0.88rem 1.1rem;
    font-size: 0.95rem;
  }

  .hero-info-grid {
    gap: 0.7rem;
  }

  .info-card {
    padding: 0.95rem 1rem;
  }

  .hero-panel {
    padding: 0.85rem;
    border-radius: 24px;
  }

  .hero-media img {
    min-height: 220px;
    max-height: 260px;
  }

  .hero-checklist {
    padding: 1.05rem;
  }

  .hero-checklist h2 {
    font-size: 1.15rem;
  }

  .content-section {
    padding: 4.5rem 0;
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  .section-heading h2,
  .section-dark h2,
  .section-contact h2 {
    font-size: clamp(1.85rem, 8vw, 2.35rem);
    line-height: 1.08;
  }

  .service-card {
    padding: 1.35rem;
    border-radius: 20px;
  }

  .service-card h3 {
    font-size: 1.3rem;
  }

  .coverage-card {
    padding: 1.05rem 1.1rem;
  }

  .coverage-card h3 {
    align-items: flex-start;
    font-size: 1.2rem;
  }

  .process-step strong {
    font-size: 1.05rem;
  }

  .process-note h3 {
    font-size: 1.15rem;
  }

  .tip-card {
    padding: 1rem;
    gap: 0.85rem;
  }

  .tip-card h3 {
    font-size: 1.1rem;
  }

  .faq-accordion .accordion-button {
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.25;
  }

  .gallery-slide img {
    height: 260px;
  }

  .gallery-caption {
    position: static;
    padding: 1rem;
    border-radius: 0;
    background: #0b1220;
  }

  .gallery-caption h3 {
    font-size: 1.25rem;
  }

  .gallery-caption p {
    font-size: 0.95rem;
  }

  .gallery-thumbnails {
    grid-auto-columns: minmax(78px, 92px);
    gap: 0.55rem;
  }

  .gallery-thumb img {
    height: 64px;
  }

  .gallery-carousel .carousel-control-prev,
  .gallery-carousel .carousel-control-next {
    width: 14%;
  }

  .gallery-carousel .carousel-control-prev-icon,
  .gallery-carousel .carousel-control-next-icon {
    width: 2.35rem;
    height: 2.35rem;
    background-size: 1rem;
  }

  .contact-card,
  .form-wrapper,
  .gallery-shell,
  .process-panel,
  .company-panel-card,
  .social-card,
  .highlight-card,
  .summary-card,
  .testimonial-card,
  .empty-state-card,
  .feedback-card,
  .embed-shell {
    padding: 1.1rem;
    border-radius: 20px;
  }

  .social-image-card {
    padding: 0;
  }

  .social-feature-image {
    height: 210px;
  }

  .social-image-card > .section-tag,
  .social-image-card > h2,
  .social-image-card > .helper-text,
  .social-image-card > .feedback-note-list {
    margin-left: 1.1rem;
    margin-right: 1.1rem;
  }

  .social-image-card > .section-tag {
    margin-top: 1.1rem;
  }

  .social-image-card > .feedback-note-list {
    margin-bottom: 1.1rem;
  }

  .subpage-section {
    padding: 3.8rem 0;
  }

  .bridge-card {
    padding: 1.2rem;
  }

  .bridge-card h3,
  .social-card h3,
  .highlight-card-body h3,
  .fleet-card-body h3,
  .testimonial-card h3,
  .empty-state-card h3 {
    font-size: 1.2rem;
  }

  .company-panel-card h2,
  .summary-card h2 {
    font-size: 1.6rem;
  }

  .fleet-card img,
  .highlight-card img {
    height: 220px;
  }

  .fleet-card-body,
  .highlight-card-body {
    padding: 1rem;
  }

  .social-card-header {
    gap: 0.8rem;
  }

  .social-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 1.3rem;
  }

  .summary-metrics div {
    padding: 0.9rem;
  }

  .recent-gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-helper-list {
    grid-template-columns: 1fr;
  }

  .recent-gallery-card,
  .recent-gallery-card:first-child {
    grid-column: auto;
  }

  .recent-gallery-media,
  .recent-gallery-card:first-child .recent-gallery-media {
    aspect-ratio: 16 / 10;
  }

  .rating-option-grid {
    gap: 0.45rem;
  }

  .rating-option-grid label {
    min-height: 66px;
    padding: 0.65rem 0.25rem;
    font-size: 0.9rem;
  }

  .contact-card h3 {
    font-size: 1.5rem;
  }

  .contact-list a {
    padding: 0.85rem 0.9rem;
    font-size: 0.98rem;
  }

  .contact-meta {
    gap: 0.75rem;
    margin-top: 1.2rem;
  }

  .contact-meta div {
    padding: 0.85rem;
  }

  .contact-form .form-control {
    min-height: 50px;
    font-size: 16px;
  }

  .contact-form textarea.form-control {
    min-height: 132px;
  }

  .footer-brand {
    flex-direction: column;
    gap: 0.85rem;
  }

  .footer-logo {
    width: 70px;
    height: 70px;
  }

  .footer-bottom {
    padding-top: 1.25rem;
    margin-top: 1.25rem;
  }

  .floating-cta {
    left: auto;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    width: auto;
    max-width: calc(100vw - 1.5rem);
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }

  .floating-cta a {
    flex: 0 0 auto;
    justify-content: center;
    min-height: 46px;
    padding: 0.65rem 0.9rem;
    font-size: 0.86rem;
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(7, 15, 29, 0.24);
  }
}

@media (max-width: 575px) {
  .navbar-brand {
    max-width: calc(100% - 64px);
  }

  .hero-section h1,
  .section-heading h2,
  .section-dark h2,
  .section-contact h2 {
    word-break: break-word;
  }

  .hero-section {
    padding-top: 6.6rem;
  }

  .page-hero {
    padding-top: 6.5rem;
  }

  .hero-section h1 {
    font-size: 2rem;
  }

  .page-hero h1 {
    font-size: 1.85rem;
  }

  .hero-lead,
  .section-heading p,
  .section-intro {
    font-size: 1rem;
  }

  .gallery-carousel .carousel-control-prev,
  .gallery-carousel .carousel-control-next {
    width: 16%;
  }

  .gallery-thumb img {
    height: 60px;
  }

  .gallery-slide img {
    height: 220px;
  }

  .gallery-caption {
    padding: 0.85rem;
  }

  .gallery-caption h3 {
    font-size: 1.05rem;
  }

  .gallery-caption p {
    font-size: 0.92rem;
  }

  .contact-list a {
    align-items: flex-start;
  }

  .floating-cta a {
    gap: 0.35rem;
    font-size: 0.82rem;
    min-height: 44px;
    padding: 0.62rem 0.82rem;
  }

  .floating-cta i {
    font-size: 1rem;
  }

  .floating-cta span {
    font-size: 0.82rem;
  }

  .rating-option-grid {
    grid-template-columns: repeat(5, minmax(52px, 1fr));
  }

  .rating-option-grid label {
    min-height: 60px;
    font-size: 0.82rem;
  }
}