/* =====================================================
   contacto.responsive.css — Ajustes SOLO para teléfonos
   Límite: <= 600px (no afecta tabletas ni computadoras)
   Autor: ChatGPT (para Ing. Mario Isaac)
   Página: contacto.html
   ===================================================== */
@media (max-width: 600px) {
  :root {
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 14px;
    --space-lg: 18px;
  }
  html { font-size: 16px; }
  body { margin: 0; overflow-x: hidden; }

  /* ===== Header y navegación compactos ===== */
  header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }
  header img.escudo { height: 92px; }

  .titulo-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .titulo-nav h1 {
    font-size: 1.1rem;
    line-height: 1.2;
    margin: 0;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: var(--space-sm);
    right: var(--space-md);
    font-size: 1rem;
  }
  .menu-toggle .menu-icon { font-size: 1.8rem; }

  nav.menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; width: 100%;
    background: #0f2c53;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  nav.menu.show { display: block; }

  nav.menu ul {
    display: flex; flex-direction: column;
    gap: 0; margin: 0; padding: 0; list-style: none;
  }
  nav.menu li { border-top: 1px solid rgba(255,255,255,0.1); }
  nav.menu a,
  nav.menu li button#toggle-theme {
    display: block; width: 100%; text-align: left;
    padding: 12px 16px; font-size: 1rem;
  }

  /* Evitar traslape del header fijo */
  main { margin-top: 185px; }

  /* Imagen de contacto.html */
  img.frontal[src*="Panfleto de la Asociacion.png"] {
    margin-top: 40px; /* ajusta a tu gusto */
  }

  /* ===== Sección formulario ===== */
  .formulario-contacto {
    margin: 28px auto;
    padding: var(--space-lg) var(--space-md);
    width: 100%;
    max-width: 520px;
    border-radius: 16px;
  }
  .formulario {
    display: block;
  }
  .formulario h2 {
    font-size: 1.25rem;
    text-align: center;
    margin: 0 0 var(--space-md);
  }
  .campo {
    margin-bottom: var(--space-sm);
  }
  .campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.98rem;
  }
  .input-wrapper { width: 100%; }
  .formulario input,
  .formulario textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    padding: 12px 14px;
  }
  .formulario textarea { min-height: 120px; }

  .boton-contenedor {
    margin-top: var(--space-md);
    display: flex;
    justify-content: center;
  }
  .formulario button[type="submit"] {
    width: 100%;
    max-width: 420px;
    padding: 12px 16px;
    font-size: 1.05rem;
    border-radius: 12px;
  }

  /* ===== Toast de notificación ===== */
  .toast-notify {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    width: calc(100% - 32px);
    max-width: 520px;
    padding: 10px 14px;
    border-radius: 10px;
    z-index: 1100;
  }

  /* ===== Flecha flotante ===== */
  .flecha-scroll { bottom: 18px; left: 18px; }
  .flecha-icono { width: 38px; height: 38px; }

  /* ===== Modal anti-plagio: ajusta a pantalla pequeña ===== */
  .modal-plagio .modal-contenido {
    width: calc(100% - 40px);
    max-width: 520px;
    padding: var(--space-md);
    border-radius: 14px;
  }
  .modal-plagio .icono { font-size: 2rem; }
  .modal-plagio h2 { font-size: 1.2rem; }
  .modal-plagio p  { font-size: 0.95rem; }

  /* ===== Footer ===== */
  .footer {
    padding: var(--space-lg) var(--space-md);
    text-align: center;
  }
  .marca-agua-footer,
  .marca-agua-izquierda {
    font-size: 12px;
  }
}

/* =====================================================
   Micro-ajustes para pantallas MUY pequeñas (<=360px)
   ===================================================== */
@media (max-width: 360px) {
  header img.escudo { height: 82px; }
  .titulo-nav h1 { font-size: 1rem; }
  main { margin-top: 168px; }
}
/* ===== PERF (solo móviles) ===== */
@media (max-width: 600px) {
  /* Evita cálculos caros de pintura */
  * { backface-visibility: hidden; }
  .cuadro-dinamico,
  .cuadro-vertical,
  .descripcion-box,
  .mapa-card {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
  }

  /* Secciones grandes: que no bloqueen el render */
  .quienes-somos-container,
  .vision-wrapper,
  .mision-wrapper,
  .valores-wrapper,
  .mapa-elegante {
    content-visibility: auto;
    contain-intrinsic-size: 800px 600px; /* tamaño estimado para reservar espacio */
  }

  /* Imágenes: evita reflujo y usa cover/contain sin reescalar en cada frame */
  img { image-rendering: -webkit-optimize-contrast; }

  /* Animaciones hover y cortina: desactiva en pantallas táctiles */
  @media (hover: none) {
    .cuadro-vertical:hover .cortina { bottom: -100% !important; }
    .cortina { transition: none !important; }
  }
}
@media (max-width: 600px) {
  header, .menu { will-change: transform; transform: translateZ(0); }
}