/**
 * Miloser — estilos que theme.json no puede expresar.
 *
 * Todo lo que sea color, tipografía o espaciado sale de los tokens de
 * theme.json. Acá viven solo comportamiento (menú móvil, botón flotante) y
 * layouts que el editor no genera solo.
 */

/* -------------------------------------------------------------------------
 * 1. Base
 * ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	overflow-x: hidden;
}

img {
	height: auto;
}

/* Los títulos nunca se cortan en sílabas: en tipografías condensadas y a estos
   tamaños, la separación con guion queda mal. `manual` deja igualmente cortar a
   mano insertando un guion suave (­) donde uno quiera.
   `overflow-wrap` solo actúa si una palabra sola no entra en el ancho, y corta
   sin agregar guion. */
h1, h2, h3, h4, h5, h6 {
	hyphens: manual;
	overflow-wrap: break-word;
	/* Reparte las líneas de forma pareja en vez de dejar una palabra suelta
	   colgando al final. Los navegadores que no lo soportan lo ignoran. */
	text-wrap: balance;
}

/* El cuerpo de texto tampoco se separa en sílabas. */
p, li {
	hyphens: manual;
}

/* -------------------------------------------------------------------------
 * 2. Encabezado
 * ---------------------------------------------------------------------- */

.miloser-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 0 rgba(26, 47, 94, 0.08);
}

.miloser-header .wp-block-site-logo img {
	width: clamp(150px, 22vw, 240px);
}

/* Enlaces del menú */
.miloser-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.miloser-header .wp-block-navigation-item__content:hover,
.miloser-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--blue-bright);
	border-bottom-color: var(--wp--preset--color--blue-bright);
	text-decoration: none;
}

/* Botón CONTACTO del header: pastilla celeste con ícono de WhatsApp */
.miloser-btn-contacto a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--wp--preset--color--blue-bright);
	color: var(--wp--preset--color--white) !important;
	border-radius: 999px;
	padding: 0.6rem 1.4rem 0.6rem 0.6rem;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-bottom: 0 !important;
	transition: background-color 0.15s ease;
}

.miloser-btn-contacto a:hover {
	background: var(--wp--preset--color--blue);
	text-decoration: none;
}

.miloser-btn-contacto a::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--whatsapp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fff'%3E%3Cpath d='M16.04 3C8.86 3 3.02 8.84 3.02 16.02c0 2.29.6 4.53 1.75 6.5L3 29l6.65-1.74a13 13 0 0 0 6.39 1.66c7.18 0 13.03-5.84 13.03-13.02C29.07 8.84 23.22 3 16.04 3Zm5.93 15.64c-.32-.16-1.92-.95-2.22-1.06-.3-.11-.52-.16-.73.16-.22.32-.84 1.06-1.03 1.28-.19.22-.38.24-.7.08-.33-.16-1.37-.5-2.62-1.61-.97-.86-1.62-1.93-1.81-2.25-.19-.32-.02-.5.14-.66.15-.14.33-.38.49-.57.16-.19.22-.32.33-.54.11-.22.05-.4-.03-.57-.08-.16-.73-1.76-1-2.4-.26-.63-.53-.55-.73-.56l-.62-.01c-.22 0-.57.08-.86.4-.3.32-1.13 1.1-1.13 2.7 0 1.58 1.16 3.12 1.32 3.34.16.22 2.28 3.48 5.52 4.88.77.33 1.37.53 1.84.68.77.25 1.48.21 2.03.13.62-.09 1.92-.78 2.19-1.54.27-.76.27-1.41.19-1.55-.08-.13-.3-.21-.62-.37Z'/%3E%3C/svg%3E") center / 17px no-repeat;
}

/* Menú desplegable en móvil: fondo azul institucional a pantalla completa */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--navy);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	font-size: 1.5rem;
	border-bottom: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
 * 3. Hero
 * ---------------------------------------------------------------------- */

.miloser-hero {
	position: relative;
	min-height: clamp(420px, 58vw, 760px);
	display: flex;
	align-items: center;
}

.miloser-hero .wp-block-cover__background {
	/* El velo del diseño: azul institucional degradando al azul medio. */
	background: linear-gradient(180deg, rgba(32, 59, 124, 0.86) 0%, rgba(46, 109, 180, 0.74) 100%);
}

.miloser-hero h1 {
	margin: 0;
	/* En el diseño el título va en versales; el texto se guarda en caja
	   normal para que siga siendo legible al editarlo. */
	text-transform: uppercase;
	line-height: 0.98;
}

.miloser-hero .wp-block-cover__inner-container {
	max-width: 900px;
	margin-inline: 0;
}

/* La segunda línea del título del hero va en celeste, como en el diseño. */
.miloser-hero .miloser-hero__resalte {
	color: var(--wp--preset--color--blue-bright);
	display: block;
}

/* Hero interno de las páginas secundarias: franja azul sólida, sin foto. */
.miloser-hero-interno {
	background: var(--wp--preset--color--navy);
	padding-block: clamp(3.5rem, 9vw, 7rem);
}

.miloser-hero-interno h1 {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 4. Barra de indicadores (+20 años · 12 unidades · Todo el país)
 * ---------------------------------------------------------------------- */

.miloser-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
	text-align: center;
}

.miloser-stats > * + * {
	border-left: 1px solid rgba(32, 59, 124, 0.18);
}

.miloser-stats__numero {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	color: var(--wp--preset--color--navy);
	text-transform: uppercase;
	margin: 0 0 0.35rem;
}

.miloser-stats__texto {
	font-weight: 700;
	color: var(--wp--preset--color--blue);
	margin: 0;
}

@media (max-width: 781px) {
	.miloser-stats {
		grid-template-columns: 1fr;
	}

	/* En vertical la separación pasa a ser horizontal. */
	.miloser-stats > * + * {
		border-left: 0;
		border-top: 1px solid rgba(32, 59, 124, 0.18);
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* -------------------------------------------------------------------------
 * 5. Tarjetas
 * ---------------------------------------------------------------------- */

.is-style-miloser-card {
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--card);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.is-style-miloser-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

/* Tarjetas de "¿Qué transportamos?": sobre fondo azul, borde tenue. */
.miloser-card-sobre-azul {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
	text-align: center;
	height: 100%;
}

.miloser-card-sobre-azul h3,
.miloser-card-sobre-azul p {
	color: var(--wp--preset--color--white);
}

.miloser-card-sobre-azul img,
.miloser-card-sobre-azul svg {
	width: 56px;
	height: 56px;
	margin-inline: auto;
	margin-bottom: 1rem;
}

/* Tarjetas de valores: fondo celeste. */
.miloser-card-valor {
	background: var(--wp--preset--color--sky);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
	text-align: center;
	height: 100%;
}

.miloser-card-valor img {
	width: 56px;
	height: 56px;
	margin-inline: auto;
	margin-bottom: 1rem;
}

/* Grilla 2x2 de las tarjetas de tecnología.
   Antes esto eran columnas anidadas con las tarjetas a `height: 100%`. Como
   había dos tarjetas por columna, cada una reclamaba la altura completa y el
   bloque terminaba ocupando el doble y desbordando por debajo del pie. Con
   grilla, las celdas se igualan solas y no hace falta ninguna altura fija. */
.miloser-tec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
}

@media (max-width: 599px) {
	.miloser-tec-grid {
		grid-template-columns: 1fr;
	}
}

/* Tarjetas de tecnología: celeste muy claro, ícono al costado. */
.miloser-card-tec {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--wp--preset--color--gray-bg);
	border: 1px solid rgba(119, 200, 235, 0.5);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
}

.miloser-card-tec img {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
}

.miloser-card-tec p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.15;
	color: var(--wp--preset--color--navy);
}

/* -------------------------------------------------------------------------
 * 6. Tarjetas de unidades (Flota)
 * ---------------------------------------------------------------------- */

.miloser-unidades {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--30);
}

@media (max-width: 1023px) {
	.miloser-unidades {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.miloser-unidades {
		grid-template-columns: 1fr;
	}
}

.miloser-unidad {
	background: var(--wp--preset--color--white);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
	display: flex;
	flex-direction: column;
}

.miloser-unidad img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.miloser-unidad__cuerpo {
	padding: 1.25rem;
}

.miloser-unidad__titulo {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1.125rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	letter-spacing: 0.02em;
	margin: 0 0 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--wp--preset--color--sky);
}

.miloser-unidad__specs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

/* El ícono va como fondo para que el texto de la especificación siga siendo
   una lista normal, editable desde el editor sin tocar HTML. */
.miloser-unidad__specs li {
	/* El diseño usaba Montserrat sólo acá; unificado a Barlow. */
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	padding-left: 1.6rem;
	background-repeat: no-repeat;
	background-position: 0 0.15em;
	background-size: 16px 16px;
}

.miloser-unidad__specs strong {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.miloser-unidad__specs .spec--volumen {
	background-image: url("../icons/flota--icon-volumen-x-m3.svg");
}

.miloser-unidad__specs .spec--medidas {
	background-image: url("../icons/flota--icon-medidas-internas-xx-m-xx-m-xx0-m.svg");
}

.miloser-unidad__specs .spec--altura {
	background-image: url("../icons/flota--icon-altura-total-xx-m.svg");
}

.miloser-unidad__specs .spec--carga {
	background-image: url("../icons/flota--icon-carga-maxima-xxtoneladas.svg");
}

.miloser-unidad__specs .spec--pallets {
	background-image: url("../icons/flota--icon-pallets-xx-unidades.svg");
}

/* -------------------------------------------------------------------------
 * 7. Lista de ventajas con ícono (¿Por qué elegirnos?)
 * ---------------------------------------------------------------------- */

.miloser-ventaja {
	gap: 0.85rem;
	align-items: flex-start;
	margin-bottom: 1.15rem;
}

.miloser-ventaja figure {
	flex: 0 0 auto;
	margin: 0.35rem 0 0;
}

.miloser-ventaja img {
	width: 26px;
	height: 26px;
}

.miloser-ventaja p {
	margin: 0;
	line-height: 1.45;
}

.miloser-ventaja strong {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * 8. Detalles del diseño
 * ---------------------------------------------------------------------- */

/* Subrayado celeste bajo ciertos títulos de sección. */
.miloser-titulo-subrayado::after {
	content: "";
	display: block;
	width: 220px;
	max-width: 60%;
	height: 3px;
	margin-top: 1.25rem;
	background: var(--wp--preset--color--sky);
}

.miloser-titulo-subrayado.has-text-align-right::after {
	margin-left: auto;
}

/* Chips azules de la página Servicios.
   Van dentro de una grilla con `gap` propio en vez de depender del margen
   entre bloques: `margin: 0` en el chip anulaba la separación que aplica
   WordPress y los tres quedaban pegados. */
.miloser-chips {
	display: grid;
	gap: 1rem;
}

.miloser-chip {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
	border-radius: 10px;
	padding: 1.15rem 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0;
}

/* Para las páginas creadas antes de la 0.1.3, donde los chips son párrafos
   sueltos sin el contenedor `.miloser-chips`. */
.miloser-chip + .miloser-chip {
	margin-top: 1rem;
}

/* Cita de la misión: barra celeste a la izquierda. */
.miloser-mision {
	border-left: 3px solid var(--wp--preset--color--sky);
	padding-left: var(--wp--preset--spacing--40);
}

.miloser-mision p {
	color: var(--wp--preset--color--white);
	margin: 0;
}

/* Imágenes de contenido con esquinas redondeadas, como en el diseño.
   La proporción se fija por sección: las fotos originales son verticales de
   900x1200 y, sin acotarlas, estiran la columna y descuadran el bloque. */
.miloser-foto img {
	border-radius: 14px;
	width: 100%;
	object-fit: cover;
	/* Tope de seguridad: las fotos verticales de 900x1200 estiraban la sección.
	   Vale también para las páginas creadas antes de la 0.1.3, que no tienen
	   las clases de proporción de abajo. Recorta, no deforma. */
	max-height: 620px;
}

/* Retrato recortado (Quiénes somos), según la caja del diseño. */
.miloser-foto--retrato img {
	aspect-ratio: 512 / 595;
}

/* Casi cuadrada (Servicios). */
.miloser-foto--cuadrada img {
	aspect-ratio: 1 / 1;
}

@media (max-width: 781px) {
	/* Apiladas, una foto muy alta ocupa toda la pantalla: se achatan. */
	.miloser-foto--retrato img,
	.miloser-foto--cuadrada img {
		aspect-ratio: 4 / 3;
	}
}

/* -------------------------------------------------------------------------
 * 9. Pie de página
 * ---------------------------------------------------------------------- */

.miloser-footer {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--40);
}

.miloser-footer p,
.miloser-footer a {
	color: var(--wp--preset--color--white);
}

.miloser-footer .wp-block-site-logo img {
	width: 170px;
}

.miloser-footer__legal {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.7;
	text-align: center;
	margin: 0;
}

.miloser-footer__mascota {
	width: 84px;
	height: auto;
	justify-self: end;
}

@media (max-width: 781px) {
	.miloser-footer__mascota {
		justify-self: center;
	}
}

/* -------------------------------------------------------------------------
 * 10. Botón flotante de WhatsApp
 * ---------------------------------------------------------------------- */

.miloser-wa-float {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 200;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--wp--preset--color--whatsapp);
	color: #fff;
	box-shadow: var(--wp--preset--shadow--float);
	transition: transform 0.18s ease;
}

.miloser-wa-float:hover {
	transform: scale(1.06);
	color: #fff;
}

.miloser-wa-float:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * 11. Accesibilidad
 * ---------------------------------------------------------------------- */

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	background: var(--wp--preset--color--navy);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 6px;
}