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

  /* ===== Header fijo y compacto ===== */
  header {
    position: fixed; /* ya lo usas, aquí reforzamos en móvil */
    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: 96px;
  }

  .titulo-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .titulo-nav h1 {
    font-size: 1.15rem;
    line-height: 1.2;
    margin: 0;
  }

  /* Botón hamburguesa visible en móvil */
  .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; }

  /* Menú desplegable en móvil */
  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 que el contenido quede escondido tras el header */
  main {
    margin-top: 20px; /* altura aproximada del header en móvil */
  }


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

  /* ===== Cuadros de cursos (grid a una columna) ===== */
  .contenedor-cuadros {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: 0 var(--space-md);
  }

  .cuadro-vertical {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 3/4;   /* Mantiene proporción agradable */
    height: auto;
    border-radius: 16px;
  }

  .cuadro-vertical img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Cortina usable en pantallas táctiles: sin hover, con tap */
  @media (hover: none) {
    .cuadro-vertical:hover .cortina { bottom: -100%; } /* desactiva hover */
    .cuadro-vertical:active .cortina,
    .cuadro-vertical:focus-within .cortina { bottom: 0; }
  }

  .cortina {
    bottom: -100%;
    transition: bottom 0.35s ease-in-out;
    padding-top: var(--space-sm);
  }
  .contenido-cortina h2 {
    font-size: 1.35rem;
    margin: 0 0 var(--space-sm);
  }
  .contenido-cortina p.descripcion {
    font-size: 0.95rem;
  }

  /* ===== ¿Quiénes somos? (dos a una columna) ===== */
  .quienes-somos-container {
    margin: var(--space-lg) auto;
    padding: var(--space-lg) var(--space-md);
    border-width: 2px;
  }
  .quienes-somos-contenido {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .texto-quienes {
    flex: 1 1 100%;
    font-size: 0.98rem;
    line-height: 1.55;
    padding: var(--space-xs);
    text-align: justify;
  }
  .texto-quienes h2 {
    font-size: 1.5rem;
    margin: 0 0 var(--space-sm);
  }
  .imagen-quienes { flex: 1 1 100%; }
  .imagen-quienes .imagen-pequena { max-width: 80%; }

  /* ===== Visión / Misión / Valores ===== */
  .vision-wrapper,
  .mision-wrapper,
  .valores-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: 0 var(--space-md);
    text-align: center;
  }
  .vision-container,
  .mision-container,
  .valores-container {
    width: 100% !important;
    margin: 0 !important;
  }
  .imagen-flotante img,
  .imagen-flotante-izquierda img,
  .imagen-flotante-valores img {
    width: 100% !important;
    height: auto !important;
    margin-top: var(--space-sm);
  }

  /* ===== TEMAS: listas a una columna ===== */
  .listas-dos-columnas {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 0 var(--space-md);
  }
  .listas-dos-columnas ol {
    margin: 0;
    padding-left: 1.1rem;
  }

  /* ===== Preloader más pequeño en móvil ===== */
  #preloader img {
    width: min(60vw, 260px);
    height: auto;
  }

  /* ===== Flecha de scroll más contenida ===== */
  .flecha-scroll {
    bottom: 20px;
    left: 20px;
  }
  .flecha-icono { width: 38px; height: 38px; }

  /* ===== Formulario de contacto ===== */
  .formulario-contacto {
    margin: 40px auto;
    padding: var(--space-md);
  }
  .formulario .campo { margin-bottom: var(--space-sm); }
  .formulario input,
  .formulario textarea {
    font-size: 1rem;
    padding: 12px 14px;
  }

  /* ===== Footer ===== */
  .footer {
    padding: var(--space-lg) var(--space-md);
  }
  .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: 84px; }
  .titulo-nav h1 { font-size: 1rem; }
  main { margin-top: 175px; }
}
/* ===== 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); }
}