/* responsive.css - Movil y tablet */

/* Pantallas medianas: siguen 3 columnas, mas juntas */
@media (max-width: 900px) {
  .trabajos-grid { --hueco-x: 22px; --hueco-y: 14px; }
}

@media (max-width: 768px) {
  :root { --nav: 92px; }

  nav {
    padding: 16px 18px 0;
    justify-content: space-between;   /* en movil, iconos en las esquinas */
    gap: 0;
    transition: height .4s ease;
  }

  /* En movil los iconos son algo menores que en escritorio, pero
     visibles: caja de 48px con el dibujo a 28px */
  .nav-icon { width: 48px; height: 48px; }
  .nav-icon svg { width: 28px; height: 28px; }

  .nav-nombre { font-size: 15px; }
  .nav-subtitulo { font-size: 10px; }

  /* NOTA HISTORICA: aqui hubo entre la v5.92 y la v5.95 una regla que
     quitaba el "crecido" de la seccion actual (a.active) en movil, a
     peticion de Alicia ("que no tenga memoria"). Volvio a pedirlo igual
     que en escritorio poco despues -"cuando vuelva a pulsar sobre el
     menu, que aparezca un pelin mas grande, ese sitio en el que he
     pulsado, para que sepamos donde estamos" (13-08-2026)-, asi que se
     quito esta regla: ahora a.active se comporta igual en los dos
     sitios (ver la regla base en nav.css). */

  .sec-header { padding: 32px 22px 8px; }

  /* La marca de la principal (nombre dentro de la pagina) se comporta
     igual que en escritorio; en movil solo se reduce el tamano y se
     descuelga algo menos del borde. */
  .trabajos-cabecera { padding: 48px 20px 64px; }
  .marca-nombre { font-size: 22px; }
  .marca-subtitulo { font-size: 11px; }

  /* Movil/tablet: 2 miniaturas por fila, con tamanos variados (ver
     trabajos.css) para que no se note una reticula.
     Los 70px laterales dejan pasillo libre a los iconos fijos de las
     esquinas (llegan a 18px + 48px = 66px): al hacer scroll las fotos
     ya no pasan por debajo de ellos. */
  .trabajos-grid {
    --columnas: 2;
    --hueco-x: 14px;
    --hueco-y: 12px;
    padding: 26px 70px 60px;
  }
  .proy-dash { margin: 8px auto 6px; }

  /* El margen de abajo, igual de generoso que en escritorio (ver el
     comentario largo en proyecto.css, junto a .proy-slide): reserva
     sitio real para el contador + la firma, que se calculan en JS
     (View._colocarMandos) y no deben solapar la foto. Se me olvido
     subirlo aqui a la vez que en escritorio (v5.70): con una foto muy
     vertical (ratio 1333/2000, p.ej. "Casa nas Amoreiras") y solo 6px
     de margen, contador y firma quedaban montados sobre la foto en
     movil -aviso de Alicia, video del 11-08-2026-. Ademas del margen
     esquiva la barra del navegador y el indicador de inicio del
     telefono (env(safe-area-inset-bottom)). */
  .proy-slide { padding: 2px 10px calc(44px + env(safe-area-inset-bottom, 0px)); }
  /* EN MOVIL SI HACE FALTA reservar hasta que acaben los iconos (16px
     de margen + 48px de icono = 64px): con la pantalla estrecha, un
     titulo largo ("Official College of Architects of Madrid (COAM)",
     "House and Renovation for Iñaki, Javier and Laura"...) ocupa casi
     todo el ancho y SI llega a tocar los iconos si se sube demasiado
     (comprobado: en desktop nunca pasa porque sobra ancho de sitio,
     pero en movil si). En escritorio no hace falta este margen porque
     el titulo, aunque sea largo, queda lejos de los iconos (estan en
     las esquinas y hay mucho ancho de sobra): ver proyecto.css. */
  #proyecto { padding-top: 68px; }
  .proy-cabecera { padding: 6px 22px 10px; }
  #proyecto-titulo { font-size: 16px; }
  /* LAS FLECHAS DEL REPORTAJE, OCULTAS EN MOVIL (v5.89, peticion de
     Alicia: "que cuando entres en un proyecto/encargo, las flechas
     desaparezcan en la foto de portada"). En movil se pasa de foto con
     el gesto de arrastre (swipe), que ya funciona -ver
     controller.js-, asi que el boton de flecha solo tapaba imagen sin
     aportar nada que el gesto no hiciera ya. Sigue existiendo en el
     DOM (para no complicar la logica de _colocarMandos ni el teclado),
     solo se esconde por CSS. */
  .proy-mando-flecha { display: none; }

  /* El pie de pagina tampoco queda bajo la barra del navegador */
  .pie { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }

  /* El aviso de derechos, un pelin mas pequeño que en escritorio -ahi
     esta pensado para acompañar al "© 2026 alicia f. barranco" de al
     lado, pero en movil, a todo el ancho de la pantalla y en columnas
     mucho mas estrechas, se veia grande de mas (aviso de Alicia,
     12-08-2026)-, y sin viuda: "text-wrap:pretty" hace que el
     navegador reparta el ultimo renglon para que no quede una palabra
     sola (mismo recurso que ya usa la presentacion de About, ver
     sobre.css). */
  .pie-derechos {
    font-size: 9.5px;
    text-wrap: pretty;
  }

  .mentoria-cuerpo { padding: 8px 22px 48px; }


}

/* ============================================================
   EL "ABOUT" EN UNA SOLA COLUMNA. Vale para MOVIL (por ancho) y
   TAMBIEN PARA CUALQUIER TABLET EN VERTICAL (25-08-2026).
   Estaba metido en el @media de movil, que va por ancho (max-width:
   768), asi que una tablet mas ancha en vertical -820, 834...- se
   quedaba con el diseño de dos columnas. Juan lo vio en la suya, que
   por ancho SI entraba en movil, y pidio que las demas se vieran igual:
   "que se vea como en la mia en todas las tablets en vertical; a 2
   columnas solo en horizontal".
   Tiene sentido de sobra: en vertical una tablet es alta y estrecha, y
   dos columnas ahi dejan el CV en una tira muy angosta.
   El segundo criterio reconoce la tablet como en el resto de la web
   -tactil y ancha- y la acota a vertical. Se saca del @media de movil
   para no arrastrar con el todo lo demas (rejilla, barra, reportajes),
   que ahi si depende del ancho de verdad. */
@media (max-width: 768px),
       (hover: none) and (min-width: 600px) and (orientation: portrait) {
  /* ABOUT: las dos columnas no caben una al lado de otra, asi que va
     todo en una: el retrato, debajo su presentacion y debajo el CV
     (con sus flechas). La altura de cada fila (el "no se desplaza, ni
     el padding-top ni el reparto fijo de filas) se decide en sobre.css,
     no aqui: ese archivo cubre movil Y el caso de un telefono ancho en
     horizontal a la vez (ver el bloque grande al final de sobre.css).
     Aqui solo quedan los ajustes que SI son solo de ancho estrecho:
     una columna en vez de dos, y tamaños de letra menores. */
  .sobre-wrap {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 6px 22px 22px;
  }
  /* La columna hay que forzarla a la 1: en escritorio el CV va en la 2
     y, si no se cambia aqui, la rejilla se inventa una segunda columna
     y siguen quedando uno al lado del otro, en dos tiras estrechas */
  .sobre-foto { grid-column: 1; grid-row: 1; width: min(116px, 15vh); margin-bottom: 0; }
  .sobre-izq  { grid-column: 1; grid-row: 2; }
  .sobre-der  { grid-column: 1; grid-row: 3; }
  /* En movil el nombre NO se ajusta al retrato (seria ilegible: la foto
     es pequeña por necesidad), asi que puede partirse si hace falta */
  .sobre-nombre { font-size: 17px; white-space: normal; }
  .sobre-bio p { font-size: 12px; line-height: 1.65; }
  /* Sin hueco entre parrafos, como en el resto de la web (peticion de
     Alicia, 24-08-2026). Ver .sobre-bio p + p en sobre.css. */
  .sobre-bio p + p { margin-top: 0; }
}

/* Telefonos: tambien VARIAS fotos por linea y de distintos tamanos,
   como en el PC (peticion de Alicia: que no se note una reticula).
   70px laterales: pasillo libre para los iconos de las esquinas. */
@media (max-width: 480px) {
  .trabajos-grid {
    --columnas: 2;
    --hueco-x: 12px;
    --hueco-y: 10px;
    padding: 22px 70px 54px;
  }
}

/* MOVIL EN HORIZONTAL (y ventanas de escritorio estrechas): el ancho
   supera los 768px, asi que se usa el diseno de escritorio (iconos de
   60px, que llegan a 100px del borde: margen de la barra 40px + caja
   60px). Pero a estos anchos la rejilla ocupa casi todo el ancho y sus
   fotos pasarian por debajo de los iconos. Con >=1120px el centrado
   del contenedor (max 1000px) ya deja hueco de sobra; por debajo hace
   falta forzar un margen lateral que libere los iconos. */
/* (El pasillo lateral de 104px que despeja los iconos ya se aplica a
   todos los tamanos de escritorio desde trabajos.css) */

/* Respetar la preferencia del usuario de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  /* Sin animaciones, las miniaturas en espera deben verse igualmente */
  .trabajo-item.espera { opacity: 1 !important; }
}