/* Media quearies para el index. */
/* ======== Tablet (≤ 1024px) ======== */
@media (max-width: 1024px) {
  .hero_section {
    height: 700px;
  }

  .hero_h1 {
    font-size: 52px;
    line-height: 60px;
  }

  .hero_p {
    font-size: 18px;
    line-height: 28px;
  }
}

/* ======== Mobile (≤ 768px) ======== */
@media (max-width: 768px) {
  .hero_section {
    height: 650px;
  }

  .hero_h1 {
    font-size: 34px;
    line-height: 42px;
  }

  .hero_p {
    font-size: 17px;
    line-height: 26px;
  }
  .features-section {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0;
    padding-top: 60px;
    padding-bottom: 10px;
  }

  .hero_content {
    padding-bottom: 60px;
  }

  .features-section .container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  /* Remover bordes laterales */
  .features-section .feature {
    border-left: none !important;
    border-right: none !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  /* Agregar bordes horizontales entre bloques */
  .features-section .feature:not(:first-child) {
    border-top: 1px solid rgba(229, 231, 235, 1); /* gris claro */
    padding-top: 2rem;
  }

  /* Opcional: espacio entre íconos y textos */
  .features-section .feature i {
    margin-bottom: 16px;
    font-size: 55px;
  }
  .descubre{
    margin-left: 30px;
    margin-right: 30px;
    line-height: 32px;
  }
  .feature h3{
    margin-bottom: 0 ;
  }
  .container_sobrenos h1 {
    line-height: 48px;
  }
  .video-hero{ border-radius: 14px; }
  .video-hero .video-caption{
    left: 12px; bottom: 12px; padding: 8px 10px;
  }
  .card-single {
    margin-top: 40px;
  }

/* ----------------------- PAGINA TECONOLOGIA ------------------------- */
  .container_proc h1{
    line-height: 58px;
  }
  /* Contenedor general de la sección contacto */
  [id*="contact"], [class*="contact"]{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Stack de columnas (cualquier grid interno) */
  [id*="contact"] .grid,
  [class*="contact"] .grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Si la maqueta usa dos columnas por flex, forzamos columna */
  [id*="contact"] .flex,
  [class*="contact"] .flex{
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Paneles/boxes: márgenes y bordes coherentes en mobile */
  [id*="contact"] .box,
  [class*="contact"] .box,
  [id*="contact"] .panel,
  [class*="contact"] .panel{
    border-radius: 14px;
    padding: 16px !important;
  }

  /* Formularios: inputs full width con buen tap area */
  [id*="contact"] form input,
  [class*="contact"] form input,
  [id*="contact"] form select,
  [class*="contact"] form select,
  [id*="contact"] form textarea,
  [class*="contact"] form textarea{
    width: 100% !important;
    font-size: 16px !important;    /* evita zoom en iOS */
    padding: 12px 14px !important;
    border-radius: 12px;
  }

  /* Filas de formulario en 2 columnas -> 1 columna */
  [id*="contact"] .row,
  [class*="contact"] .row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Labels y mensajes de ayuda */
  [id*="contact"] label,
  [class*="contact"] label{
    font-size: 14px !important;
    line-height: 1.3;
  }

  /* Títulos y subtítulos */
  [id*="contact"] h1,
  [class*="contact"] h1{
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 6px;
    text-align: center;
  }
  [id*="contact"] h2,
  [class*="contact"] h2{
    font-size: 22px !important;
    line-height: 1.2 !important;
    text-align: center;
  }
  [id*="contact"] p,
  [class*="contact"] p{
    font-size: 15px !important;
    color: #4b5563; /* gris medio */
    text-align: left;
  }

  /* Botón principal de consulta */
  .boton_consulta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    font-weight: 600;
    color: #fff;
    background-color: rgba(34, 87, 124, 1); /* tu color */
  }

  /* Tarjetas/columnas informativas (dirección, mail, mapa) */
  [id*="contact"] .info,
  [class*="contact"] .info{
    margin-top: 8px;
  }
  [id*="contact"] .map,
  [class*="contact"] .map,
  [id*="contact"] iframe,
  [class*="contact"] iframe{
    width: 100% !important;
    height: 260px !important;
    border-radius: 12px !important;
  }

  /* Imágenes decorativas dentro de contacto */
  [id*="contact"] img,
  [class*="contact"] img{
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }

  /* Espaciados verticales suaves */
  [id*="contact"] .mt-lg,
  [class*="contact"] .mt-lg{ margin-top: 20px !important; }
  [id*="contact"] .mb-lg,
  [class*="contact"] .mb-lg{ margin-bottom: 20px !important; }

  /* Ajuste de contenedor central si usás .container */
  [id*="contact"] .container,
  [class*="contact"] .container{
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ======== Mobile chico (≤ 480px) ======== */
@media (max-width: 480px) {
  .hero_section {
    height: 600px;
  }

  .hero_h1 {
    font-size: 30px;
    line-height: 38px;
  }

  .hero_p {
    font-size: 15px;
    line-height: 24px;
  }
}