/* Los puntos de cambio del diseño son 640, 768 y 1024 px.
   Las columnas lg de Bootstrap se ajustan expresamente a los 1024 px originales. */
@media (min-width: 640px) {
  .whatsapp-link { display: inline-flex; }
  .form-row > * { flex-basis: calc((100% - 24px)/2); }
  .contact-form .button-primary { width: auto; }
}
@media (min-width: 768px) {
  .desktop-nav { display: flex; }
  /* Los textos descriptivos de cada sección quedan debajo del título en todas las vistas. */
  .section-heading:not(.section-heading-centered) { flex-direction: column; align-items: flex-start; }
  .services-grid > .col,.institution-grid > .col,.infrastructure-grid > .col { flex-basis: calc((100% - 24px)/2); }
  .stats-grid > .col,.additional-services-grid > .col { flex-basis: calc((100% - 48px)/3); }
  .timeline { border-left: 0; margin-left: 0; }
  .timeline::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: linear-gradient(to right,rgb(var(--primary-rgb) / 20%),var(--primary),rgb(var(--primary-rgb) / 20%)); }
  .timeline-grid > .col { flex-basis: calc((100% - 96px)/4); }
  .timeline-item { padding-left: 0; padding-top: 32px; }
  .timeline-marker { left: 50%; top: -7px; transform: translateX(-50%); }
  .footer-grid > .col { flex-basis: calc((100% - 32px)/2); }
  .footer-bottom { flex-direction: row; }
}
@media (min-width: 992px) and (max-width: 1023.98px) {
  .hero-layout > .col-lg-6,.about-layout > .col-lg-6,.service-detail-layout > .col-lg-6,.contact-layout > .col-lg-5,.contact-layout > .col-lg-7 { width: 100%; }
}
@media (min-width: 1024px) {
  .site-container { padding-inline: 32px; }
  .hero-section { padding-top: 160px; padding-bottom: 112px; }
  .hero-layout { gap: 32px; }
  .hero-layout > .col-lg-6 { width: calc((100% - 32px)/2); }
  .about-layout > .col-lg-6 { width: calc((100% - 48px)/2); }
  .service-detail-layout > .col-lg-6 { width: calc((100% - 40px)/2); }
  .services-grid > .col { flex-basis: calc((100% - 96px)/5); }
  .institution-grid > .col,.infrastructure-grid > .col { flex-basis: calc((100% - 48px)/3); }
  .stats-grid > .col { flex-basis: calc((100% - 120px)/6); }
  .service-detail-reversed .service-detail-visual { order: 1; }
  .service-detail-reversed .service-detail-content { order: 2; }
  .contact-layout > .col-lg-5 { width: calc((100% - 528px)/12*5 + 192px); }
  .contact-layout > .col-lg-7 { width: calc((100% - 528px)/12*7 + 288px); }
  .contact-form-panel { padding: 40px; }
  .footer-grid > .footer-brand { flex-basis: calc((100% - 128px)/5*2 + 32px); }
  .footer-grid > .footer-column { flex-basis: calc((100% - 128px)/5); }
}
/* El HTML de referencia desbordaba en el header y en algunas tarjetas en pantallas
   estrechas. Estas reglas conservan su composición y permiten operar el menú. */
@media (max-width: 1199.98px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .main-header:has(.mobile-nav.show),.main-header:has(.mobile-nav.collapsing) { border-radius: 28px; }
}
@media (min-width: 1200px) {
  .mobile-nav { display: none !important; }
}
@media (max-width: 575.98px) {
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-inline: 12px; gap: 8px; }
  .brand { gap: 6px; }
  .brand-logo { width: 32px; height: 32px; }
  .brand-name { min-width: 0; font-size: 10px; line-height: 13px; overflow-wrap: anywhere; }
  .header-actions { gap: 6px; }
  .emergency-link { width: auto; flex-shrink: 0; padding: 10px 9px; gap: 4px; font-size: 11px; line-height: 16px; white-space: nowrap; }
  .emergency-link .material-symbols-outlined { flex-shrink: 0; font-size: 16px; }
  .menu-toggle { width: 28px; height: 30px; flex-shrink: 0; }
  .menu-toggle .material-symbols-outlined { font-size: 20px; }
  .telemetry-card { flex-wrap: wrap; gap: 10px; }
  .telemetry-icon { flex-shrink: 0; }
}
@media (max-width: 374.98px) {
  .header-inner { padding-inline: 12px; }
  .brand-name { font-size: 9px; line-height: 12px; }
  .brand-logo { width: 28px; height: 28px; }
  .brand { gap: 6px; }
  h1 { font-size: 48px; line-height: 56px; }
}

@media (max-width: 575.98px) {
  .oceba-modal .modal-header { padding: 24px 20px 16px; }
  .oceba-modal .modal-header h2 { font-size: 25px; line-height: 32px; }
  .oceba-modal .modal-body { padding: 20px; }
  .oceba-modal .modal-footer { padding: 16px 20px 22px; }
  .oceba-modal .modal-footer .button-primary,.oceba-modal .modal-footer .button-secondary { width: 100%; text-align: center; }
}

/* El contenido se ajusta a su columna: no ocultar el desbordamiento del documento. */
@media (max-width: 575.98px) {
  .hero-content,.about-content,.service-detail-content,.contact-info { min-width: 0; }
  h1,h2,h3,h4,.hero-history-copy { overflow-wrap: anywhere; }
  .hero-history { gap: 14px; padding: 16px; }
  .hero-history-mark { flex-basis: 72px; width: 72px; height: 72px; }
  .hero-history-number { font-size: 32px; line-height: 31px; }
  .hero-history-copy strong { font-size: 17px; line-height: 24px; }
  .hero-history-copy > span:last-child { font-size: 12px; line-height: 18px; }
  .stat-card { padding-inline: 16px; }
  .stat-value { font-size: clamp(32px, 9.6vw, 56px); }
  .stat-value > span { font-size: .43em; }
  .telemetry-info { min-width: 0; max-width: 100%; }
  .telemetry-info > div:last-child { min-width: 0; }
  .contact-channel > div:last-child { min-width: 0; }
}
@media (max-width: 374.98px) {
  h2,.service-detail-content h3 { font-size: 34px; line-height: 42px; }
  .telemetry-card { padding: 14px; left: 16px; right: 16px; }
  .telemetry-info { gap: 10px; }
  .telemetry-info h4 { font-size: 18px; line-height: 26px; }
}