/*
Theme Name: Mapplics
Theme URI: https://mapplics.com/
Author: Mapplics
Author URI: https://mapplics.com/
Description: Tema a medida de Mapplics — fábrica de software a medida e IA aplicada. Convertido desde el diseño original a un tema WordPress estático y liviano (sin dependencias de React), con navegación, secciones y componentes interactivos en JS vanilla.
Version: 1.10.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mapplics
*/

/* Los estilos reales del sitio están en base.css (encolado desde functions.php).
   Este archivo aporta la cabecera obligatoria del tema.

   Abajo hay un bloque de correcciones que TAMBIÉN están aplicadas en base.css,
   donde corresponden. Están duplicadas acá a propósito: el repo quedó divergido
   con un commit ajeno y el canal de subida disponible manda archivos de a uno,
   así que publicar base.css (62 KB) es caro y riesgoso, mientras que este
   archivo son unas líneas. Como se encola después de base.css (depende de
   'mp-base'), sus reglas ganan.

   Cuando el repo se reconcilie y base.css viaje completo, este bloque se borra:
   no aporta nada que base.css no diga ya. Mismo criterio que js/mp-extras.js. */

@media (max-width: 900px) {

	/* Costura foto ↔ tarjeta (PyME y Grandes Empresas).
	   base.css neutraliza los márgenes negativos porque en móvil los
	   solapamientos del hero quedan mal, pero esa regla también pisaba el
	   -1px que pega la foto al cuerpo oscuro de la tarjeta: se abría un hueco
	   de 18px y la foto quedaba suelta y cortada, sin fundirse con la caja. */
	#mp-content [style*="margin-top: -1px"] { margin-top: -1px !important; }
	#mp-content [style*="margin-top: -2px"] { margin-top: -2px !important; }

	/* Tarjeta destacada "IA aplicada" (Grandes Empresas).
	   En desktop la foto es la columna izquierda y su degradado corre en
	   horizontal hacia el panel. Apilada en móvil, ese degradado no hace nada
	   hacia abajo y la foto terminaba de golpe: lo giramos para que funda con
	   el cuerpo, igual que las tarjetas de PyME. */
	.mp-featured-ia [aria-hidden="true"][style*="linear-gradient(90deg"] {
		background: linear-gradient(180deg, rgba(21, 46, 43, 0.15) 55%, rgb(21, 46, 43) 100%) !important;
	}

	/* Los ítems con viñeta de esa misma tarjeta son una lista, no tarjetas para
	   navegar: no deben volverse carrusel (quedaba un carrusel con flechas
	   propias adentro de la sección). Al ser flex y no grid, mpIsCardGrid() los
	   descarta solo, sin tocar el armador de carruseles. */
	.mp-featured-ia [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] {
		display: flex !important;
		flex-direction: column;
		gap: 10px !important;
	}

	/* Barra de navegación fija.
	   Ya viene con position:sticky del diseño, pero base.css ponía
	   overflow-x:hidden en html/body como red anti-scroll horizontal, y eso los
	   convierte en contenedor de scroll: el sticky se pega a ese contenedor en
	   vez de al viewport y la barra se va con el scroll. 'clip' recorta igual
	   pero no crea contenedor. (En escritorio ya funcionaba: la regla de
	   overflow sólo se aplicaba en móvil.) */
	html, body { overflow-x: clip; }
}

@media (max-width: 760px) {

	/* Filas "ícono chico + texto" (los tildes de las páginas de servicio).
	   base.css deja que las filas horizontales envuelvan cuando no entran, pero
	   con eso el texto largo saltaba abajo y el tilde quedaba solo arriba. Sin
	   wrap, el texto envuelve dentro de su columna, al lado del tilde, como en
	   el resto del sitio. Son 24 filas: 4 en cada una de las 6 páginas de
	   servicio. */
	#mp-content div[style*="display: flex"][style*="align-items: center"]:has(> span[style*="flex: 0 0 auto"][style*="width: 34px"]) {
		flex-wrap: nowrap !important;
	}
}

@media (max-width: 560px) {

	/* Tarjeta del formulario de contacto: los 40px de aire interno del diseño
	   (pensados para 1280px) dejaban los campos en 257px sobre una pantalla de
	   390px. Con menos padding el formulario gana ancho, que es lo que importa
	   cuando estás tipeando en el celular.
	   Se identifica por contener los campos y no por la página, porque el id de
	   la página de contacto no es el mismo en local que en producción. */
	#mp-content div[style*="padding: 40px"]:has(.mp-input) {
		padding: 26px 18px !important;
	}
}