/* ==========================================================================
   Alfa Metal 2026
   Paleta contando pixeles del logotipo del cliente (2560x465):
     grafito  #404041  48.5 %  ->  10.21:1 sobre blanco
     naranja  #F95623  19.4 %  ->   3.42:1 sobre blanco (nunca texto chico)
   Escala funcional derivada y verificada en herramientas/contraste.py.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
	/* Marca */
	--am-naranja: #f95623;
	--am-naranja-vivo: #ff6b3d;
	--am-naranja-hondo: #d9410f;
	--am-naranja-texto: #b23a00;      /* 6.00:1 sobre blanco: texto chico */
	--am-grafito: #404041;
	--am-tinta: #0e1116;
	--am-carbon: #191d23;
	--am-carbon-alto: #232830;

	/* Neutros */
	--am-blanco: #ffffff;
	--am-humo: #f4f5f6;
	--am-humo-hondo: #e9ebee;
	--am-linea: #dfe2e6;
	--am-linea-oscura: rgba(255, 255, 255, .14);
	--am-texto: #24282f;              /* 13.6:1 sobre blanco */
	--am-texto-suave: #545b66;        /* 7.42:1 sobre blanco */
	--am-texto-claro: #f2f3f5;
	--am-texto-claro-suave: #b6bcc6;  /* 8.1:1 sobre tinta */

	/* Tipografia */
	--am-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--am-cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Medidas */
	--am-ancho: 1280px;
	--am-ancho-estrecho: 760px;
	--am-canal: clamp(1.15rem, 4vw, 3rem);
	--am-radio: 3px;
	--am-radio-grande: 6px;

	/* Ritmo vertical */
	--am-seccion: clamp(4rem, 8vw, 7.5rem);

	/* Movimiento */
	--am-curva: cubic-bezier(.22, .61, .36, 1);
	--am-curva-fuerte: cubic-bezier(.16, 1, .3, 1);

	/* Sombras */
	--am-sombra: 0 1px 2px rgba(14, 17, 22, .05), 0 8px 24px -12px rgba(14, 17, 22, .18);
	--am-sombra-alta: 0 24px 60px -28px rgba(14, 17, 22, .45);
}

/* ------------------------------------------------------------ 2. Cimientos */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6.5rem;
}

body {
	margin: 0;
	background: var(--am-blanco);
	color: var(--am-texto);
	font-family: var(--am-cuerpo);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
svg,
iframe { display: block; max-width: 100%; }

img { height: auto; }

a { color: var(--am-naranja-texto); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--am-naranja-hondo); }

h1, h2, h3, h4 {
	font-family: var(--am-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.015em;
	margin: 0;
	color: var(--am-texto);
	text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; color: inherit; }

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--am-naranja);
	outline-offset: 3px;
	border-radius: 2px;
}

.am-vis-oculto {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.am-saltar {
	position: absolute;
	left: 1rem; top: -100px;
	z-index: 999;
	padding: .8rem 1.2rem;
	background: var(--am-tinta);
	color: var(--am-blanco);
	font-weight: 600;
	text-decoration: none;
	transition: top .2s var(--am-curva);
}
.am-saltar:focus { top: 1rem; color: var(--am-blanco); }

/* ------------------------------------------------------------ 3. Estructura */
.am-contenedor {
	width: 100%;
	max-width: var(--am-ancho);
	margin-inline: auto;
	padding-inline: var(--am-canal);
}

.am-contenedor--estrecho { max-width: calc(var(--am-ancho-estrecho) + var(--am-canal) * 2); }

.am-principal { display: block; }

.am-seccion { padding-block: var(--am-seccion); }
.am-seccion--sin-espacio { padding-block: 0; }
.am-seccion--clara { background: var(--am-humo); }
.am-seccion--interior { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

.am-seccion--oscura {
	background: var(--am-tinta);
	background-image:
		radial-gradient(120% 90% at 12% 0%, rgba(249, 86, 35, .16) 0%, transparent 60%),
		linear-gradient(180deg, #12161c 0%, var(--am-tinta) 100%);
	color: var(--am-texto-claro);
}

.am-seccion--oscura :is(h1, h2, h3, h4) { color: var(--am-blanco); }
.am-seccion--oscura p { color: var(--am-texto-claro-suave); }
.am-seccion--oscura a:not(.am-btn) { color: var(--am-naranja-vivo); }

.am-seccion--cifras { padding-block: clamp(2rem, 4vw, 3.25rem); }

.am-seccion__pie { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.am-rejilla { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.am-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.am-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1000px) {
	.am-rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.am-rejilla--2,
	.am-rejilla--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------- 4. Titulos y tipografia */
.am-kicker {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1rem;
	font-family: var(--am-display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--am-naranja-texto);
}

.am-seccion--oscura .am-kicker,
.am-hero .am-kicker,
.am-interior .am-kicker,
.am-cta .am-kicker { color: var(--am-naranja-vivo); }

.am-kicker__marca {
	width: 26px; height: 2px;
	background: currentColor;
	flex: none;
}

.am-encabezado { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.am-encabezado--centrado { margin-inline: auto; text-align: center; }
.am-encabezado--centrado .am-kicker { justify-content: center; }

.am-encabezado__titulo {
	font-size: clamp(1.75rem, 3.4vw, 2.7rem);
	font-stretch: 105%;
}

.am-encabezado__intro {
	margin-top: 1rem;
	font-size: clamp(1rem, 1.35vw, 1.12rem);
	color: var(--am-texto-suave);
}

.am-titulo-pagina {
	font-size: clamp(2rem, 4.6vw, 3.2rem);
	font-stretch: 106%;
	margin-bottom: 1.25rem;
}

.am-titulo-pagina__eco {
	display: block;
	margin-top: .4rem;
	font-size: .5em;
	font-weight: 500;
	color: var(--am-texto-suave);
}

.am-parrafo { max-width: 38rem; color: var(--am-texto-suave); }
.am-parrafo--entrada { font-size: 1.15rem; color: var(--am-texto); }
.am-parrafo--guia { margin-bottom: 1.2em; }

.am-nota {
	margin-top: 2rem;
	padding-left: 1rem;
	border-left: 3px solid var(--am-naranja);
	font-size: .95rem;
}

.am-enlace-fuerte {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--am-display);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
}
.am-enlace-fuerte .am-icono { width: 1.1em; height: 1.1em; transition: transform .25s var(--am-curva); }
.am-enlace-fuerte:hover .am-icono { transform: translateX(4px); }

/* El destello del titular: el degradado se declara varias veces a proposito.
   Un ancestro con `transform` rompe background-clip:text, asi que cada
   contexto donde vive necesita su propia declaracion. */
.am-destello {
	background-image: linear-gradient(96deg, var(--am-naranja-vivo) 0%, var(--am-naranja) 45%, #ff9a6b 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	white-space: nowrap;
}

.am-hero__titulo .am-destello,
.am-interior__titulo .am-destello {
	background-image: linear-gradient(96deg, var(--am-naranja-vivo) 0%, var(--am-naranja) 45%, #ff9a6b 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.am-icono { width: 1.25rem; height: 1.25rem; flex: none; }

/* --------------------------------------------------------------- 5. Botones */
.am-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .95rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--am-radio);
	font-family: var(--am-display);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .22s var(--am-curva), color .22s var(--am-curva),
		border-color .22s var(--am-curva), transform .22s var(--am-curva);
}

.am-btn__icono { width: 1.05em; height: 1.05em; transition: transform .25s var(--am-curva); }
.am-btn:hover .am-btn__icono { transform: translateX(3px); }
.am-btn:active { transform: translateY(1px); }

/* Naranja con texto tinta: 4.73:1. Nunca naranja con texto blanco. */
.am-btn--primario {
	background: var(--am-naranja);
	border-color: var(--am-naranja);
	color: var(--am-tinta);
}
.am-btn--primario:hover {
	background: var(--am-naranja-vivo);
	border-color: var(--am-naranja-vivo);
	color: var(--am-tinta);
}

.am-btn--fantasma {
	background: transparent;
	border-color: currentColor;
	color: var(--am-texto);
}
.am-btn--fantasma:hover { background: var(--am-texto); color: var(--am-blanco); }

.am-hero .am-btn--fantasma,
.am-cta .am-btn--fantasma,
.am-seccion--oscura .am-btn--fantasma,
.am-pie .am-btn--fantasma { color: var(--am-blanco); border-color: rgba(255, 255, 255, .45); }

.am-hero .am-btn--fantasma:hover,
.am-cta .am-btn--fantasma:hover,
.am-seccion--oscura .am-btn--fantasma:hover,
.am-pie .am-btn--fantasma:hover { background: var(--am-blanco); color: var(--am-tinta); border-color: var(--am-blanco); }

.am-btn--compacto { padding: .7rem 1.15rem; font-size: .88rem; }

/* ------------------------------------------------------------- 6. Cabecera */
.am-cabecera {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--am-blanco);
	border-bottom: 1px solid var(--am-linea);
	transition: box-shadow .25s var(--am-curva), background-color .25s var(--am-curva);
}

.am-cabecera.is-fija { box-shadow: var(--am-sombra); }

.am-cinta {
	background: var(--am-tinta);
	color: var(--am-texto-claro-suave);
	font-size: .82rem;
}

.am-cinta__caja {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 42px;
}

.am-cinta__dato {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
}

.am-cinta__dato .am-icono { width: 1rem; height: 1rem; color: var(--am-naranja-vivo); }

.am-cinta__acciones {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-left: auto;
}

.am-cinta__enlace,
.am-cinta__idioma {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--am-texto-claro);
	text-decoration: none;
	font-weight: 500;
}

.am-cinta__enlace .am-icono,
.am-cinta__idioma .am-icono { width: 1rem; height: 1rem; color: var(--am-naranja-vivo); }
.am-cinta__enlace:hover,
.am-cinta__idioma:hover { color: var(--am-naranja-vivo); }

.am-cinta__idioma {
	padding: .2rem .65rem;
	border: 1px solid var(--am-linea-oscura);
	border-radius: var(--am-radio);
}

@media (max-width: 980px) {
	.am-cinta__dato:nth-child(2),
	.am-cinta__enlace:nth-of-type(2) { display: none; }
}
@media (max-width: 640px) {
	.am-cinta { font-size: .76rem; }
	.am-cinta__dato:first-child { display: none; }
	.am-cinta__acciones { margin-left: 0; width: 100%; justify-content: space-between; gap: .75rem; }
}

.am-barra__caja {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 78px;
}

.am-logo { display: block; flex: none; line-height: 0; }
.am-logo__img { width: clamp(150px, 17vw, 208px); height: auto; }
.am-logo__img--oscuro { display: none; }

.am-nav { margin-left: auto; }

.am-nav__lista {
	display: flex;
	align-items: center;
	gap: clamp(.5rem, 1.6vw, 1.4rem);
	list-style: none;
}

.am-nav__item { position: relative; }

.am-nav__enlace {
	display: block;
	padding: .55rem .25rem;
	font-family: var(--am-display);
	font-size: .93rem;
	font-weight: 600;
	color: var(--am-texto);
	text-decoration: none;
	white-space: nowrap;
	position: relative;
}

.am-nav__enlace::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--am-naranja);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s var(--am-curva);
}

.am-nav__enlace:hover,
.am-nav__item.is-activo > .am-nav__enlace { color: var(--am-naranja-texto); }
.am-nav__enlace:hover::after,
.am-nav__item.is-activo > .am-nav__enlace::after { transform: scaleX(1); }

.am-nav__desplegar {
	display: none;
	background: none;
	border: 0;
	padding: .35rem;
	cursor: pointer;
}

.am-nav__submenu {
	position: absolute;
	top: 100%; left: -1rem;
	min-width: 17rem;
	padding: .5rem;
	margin: 0;
	list-style: none;
	background: var(--am-blanco);
	border: 1px solid var(--am-linea);
	border-radius: var(--am-radio-grande);
	box-shadow: var(--am-sombra-alta);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s var(--am-curva), transform .2s var(--am-curva), visibility .2s;
}

.am-nav__item--con-hijos:hover .am-nav__submenu,
.am-nav__item--con-hijos:focus-within .am-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.am-nav__subenlace {
	display: block;
	padding: .6rem .85rem;
	border-radius: var(--am-radio);
	font-size: .9rem;
	font-weight: 500;
	color: var(--am-texto);
	text-decoration: none;
}
.am-nav__subenlace:hover { background: var(--am-humo); color: var(--am-naranja-texto); }

.am-nav__pie { display: none; }

.am-barra__acciones { display: flex; align-items: center; gap: .75rem; }

.am-hamburguesa {
	display: none;
	width: 46px; height: 46px;
	padding: 0;
	background: var(--am-tinta);
	border: 0;
	border-radius: var(--am-radio);
	cursor: pointer;
	position: relative;
	flex: none;
}

.am-hamburguesa__barra {
	position: absolute;
	left: 50%; top: 50%;
	width: 20px; height: 2px;
	margin-left: -10px;
	background: var(--am-blanco);
	transition: transform .25s var(--am-curva), opacity .18s var(--am-curva);
}

/* nth-of-type cuenta entre hermanos del mismo elemento; el primer hijo del
   boton es el <span class="am-vis-oculto"> del rotulo, asi que las barras
   son 2, 3 y 4. */
.am-hamburguesa__barra:nth-of-type(2) { transform: translateY(-7px); }
.am-hamburguesa__barra:nth-of-type(3) { transform: translateY(0); }
.am-hamburguesa__barra:nth-of-type(4) { transform: translateY(7px); }

.am-hamburguesa[aria-expanded="true"] .am-hamburguesa__barra:nth-of-type(2) { transform: rotate(45deg); }
.am-hamburguesa[aria-expanded="true"] .am-hamburguesa__barra:nth-of-type(3) { opacity: 0; }
.am-hamburguesa[aria-expanded="true"] .am-hamburguesa__barra:nth-of-type(4) { transform: rotate(-45deg); }

.am-velo-menu {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(14, 17, 22, .55);
	backdrop-filter: blur(2px);
}

@media (max-width: 1080px) {
	.am-barra__cta { display: none; }
	.am-hamburguesa { display: block; }

	/* .am-nav pasa a `position: fixed`, asi que su `margin-left: auto` deja de
	   empujar nada: el boton se queda pegado al logotipo en vez de irse al
	   extremo derecho. El auto tiene que moverse a las acciones. */
	/* El panel del menu se dibuja por encima de la barra; sin esto la
	   hamburguesa queda debajo y no se ve la X para cerrarlo. */
	.am-barra__acciones { margin-left: auto; position: relative; z-index: 71; }

	.am-nav {
		position: fixed;
		top: 0; right: 0; bottom: 0;
		z-index: 70;
		width: min(24rem, 88vw);
		margin: 0;
		padding: 5.5rem 1.75rem 2rem;
		background: var(--am-tinta);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .32s var(--am-curva-fuerte);
	}

	.am-nav.is-abierto { transform: translateX(0); }

	.am-nav__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.am-nav__item {
		border-bottom: 1px solid var(--am-linea-oscura);
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.am-nav__enlace {
		padding: 1rem 0;
		font-size: 1.05rem;
		color: var(--am-blanco);
	}
	.am-nav__enlace::after { display: none; }
	.am-nav__item.is-activo > .am-nav__enlace { color: var(--am-naranja-vivo); }

	.am-nav__desplegar {
		display: block;
		color: var(--am-texto-claro-suave);
		transition: transform .25s var(--am-curva);
	}
	.am-nav__desplegar[aria-expanded="true"] { transform: rotate(180deg); color: var(--am-naranja-vivo); }

	.am-nav__submenu {
		position: static;
		grid-column: 1 / -1;
		min-width: 0;
		padding: 0 0 .75rem .9rem;
		margin: 0;
		background: none;
		border: 0;
		border-left: 2px solid var(--am-naranja);
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}

	.am-nav__submenu.is-abierto { display: block; }

	.am-nav__subenlace { color: var(--am-texto-claro-suave); padding: .5rem 0; }
	.am-nav__subenlace:hover { background: none; color: var(--am-naranja-vivo); }

	.am-nav__pie {
		display: grid;
		gap: .75rem;
		margin-top: 2rem;
	}

	.am-nav__telefono,
	.am-nav__idioma {
		display: inline-flex;
		align-items: center;
		gap: .6rem;
		padding: .85rem 1rem;
		border: 1px solid var(--am-linea-oscura);
		border-radius: var(--am-radio);
		color: var(--am-blanco);
		text-decoration: none;
		font-weight: 600;
	}
	.am-nav__telefono .am-icono,
	.am-nav__idioma .am-icono { color: var(--am-naranja-vivo); }
}

@media (min-width: 1081px) {
	.am-velo-menu { display: none; }
}

/* ------------------------------------------------- 7. Hero panoramico 3D */
.am-hero {
	position: relative;
	isolation: isolate;
	min-height: min(88vh, 780px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background: var(--am-tinta);
	color: var(--am-blanco);
	padding-top: clamp(3rem, 8vw, 6rem);
}

/* La escena solo contiene las fotografias. Los velos van FUERA: dentro de un
   contenedor preserve-3d el navegador los ordena por profundidad y acaban
   pintandose por detras de la foto. */
.am-hero__escena {
	position: absolute;
	inset: 0;
	z-index: 0;
	perspective: 1400px;
	perspective-origin: 50% 45%;
}

.am-hero__camara {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform:
		rotateX(calc(var(--am-rx, 0) * 1deg))
		rotateY(calc(var(--am-ry, 0) * 1deg))
		translateY(calc(var(--am-desliz, 0) * 1px));
	transition: transform .5s var(--am-curva);
}

.am-hero__lienzo {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: translateZ(-150px) scale(1.02);
	transition: opacity 1.1s var(--am-curva), transform 1.6s var(--am-curva);
}

.am-hero__lienzo.is-activo { opacity: 1; transform: translateZ(-150px) scale(1); }

/* La hoja base impone img{max-width:100%}: sin este `none` el navegador
   recorta la foto al ancho del padre y, al empujarla con translateZ, la
   perspectiva la encoge y descubre el fondo por los lados. */
.am-hero__foto {
	position: absolute;
	top: 50%; left: 50%;
	width: 152%;
	max-width: none;
	height: 152%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	filter: saturate(1.04) contrast(1.03);
}

.am-hero__velo {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.am-hero__velo--tinta {
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(14, 17, 22, .78) 0%, rgba(14, 17, 22, .4) 36%, rgba(14, 17, 22, .86) 100%);
}

.am-hero__velo--lateral {
	z-index: 2;
	background:
		linear-gradient(92deg, rgba(14, 17, 22, .9) 0%, rgba(14, 17, 22, .58) 38%, rgba(14, 17, 22, .06) 74%, rgba(249, 86, 35, .2) 100%);
}

.am-hero__rejilla {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: .5;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 96px 96px;
	mask-image: radial-gradient(120% 90% at 20% 40%, #000 0%, transparent 70%);
	-webkit-mask-image: radial-gradient(120% 90% at 20% 40%, #000 0%, transparent 70%);
}

.am-hero__contenido {
	position: relative;
	z-index: 4;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.am-hero__contenido > .am-contenedor { position: relative; width: 100%; }

.am-hero__panel {
	max-width: 44rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(18px);
	transition: opacity .26s var(--am-curva), transform .26s var(--am-curva), visibility .26s;
}

/* Los paneles inactivos necesitan `top:0`: sin el toman su posicion estatica,
   que es debajo del activo, y durante el cruce de opacidad el panel saliente
   aparece abajo, encima de los controles. */
.am-hero__panel:not(.is-activo) {
	position: absolute;
	top: 0; left: var(--am-canal); right: var(--am-canal);
	pointer-events: none;
}

/* El panel entrante espera a que el saliente termine de irse: si los dos se
   cruzan a media opacidad, los titulares se leen uno encima del otro. */
.am-hero__panel.is-activo {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .5s var(--am-curva) .26s, transform .7s var(--am-curva-fuerte) .26s, visibility 0s;
}

.am-hero__titulo {
	margin: 0 0 1.25rem;
	font-size: clamp(2.15rem, 5.4vw, 4.15rem);
	font-stretch: 108%;
	line-height: 1.02;
	letter-spacing: -.022em;
	color: var(--am-blanco);
}

.am-hero__linea { display: block; }
.am-hero__linea--cola { color: var(--am-texto-claro-suave); font-weight: 600; }

.am-hero__texto {
	max-width: 34rem;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	color: var(--am-texto-claro-suave);
}

.am-hero__dato {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 1.75rem;
	padding: .45rem .9rem;
	border: 1px solid rgba(249, 86, 35, .45);
	border-radius: 100px;
	background: rgba(249, 86, 35, .1);
	font-family: var(--am-display);
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--am-naranja-vivo);
}

.am-hero__dato-icono { width: 1rem; height: 1rem; }

.am-hero__acciones { display: flex; flex-wrap: wrap; gap: .85rem; }

.am-hero__controles {
	position: relative;
	z-index: 5;
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.am-hero__controles-caja {
	display: flex;
	align-items: flex-end;
	gap: 1.5rem;
}

.am-hero__puntos {
	display: flex;
	gap: clamp(.5rem, 1.6vw, 1.25rem);
	flex: 1 1 auto;
	min-width: 0;
}

.am-hero__punto {
	flex: 1 1 0;   /* nunca `1 1 20rem`: al girar el eje se convierte en altura */
	min-width: 0;
	display: grid;
	gap: .55rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	color: var(--am-texto-claro-suave);
}

.am-hero__punto-etiqueta {
	font-family: var(--am-display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
}

.am-hero__punto-barra {
	display: block;
	height: 3px;
	background: rgba(255, 255, 255, .22);
	overflow: hidden;
}

.am-hero__punto-avance {
	display: block;
	height: 100%;
	width: 0;
	background: var(--am-naranja);
}

.am-hero__punto.is-activo { color: var(--am-blanco); }
.am-hero__punto.is-activo .am-hero__punto-avance { width: var(--am-avance, 0%); }
.am-hero__punto:hover { color: var(--am-naranja-vivo); }

.am-hero__flechas { display: flex; gap: .5rem; flex: none; }

.am-hero__flecha {
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--am-radio);
	color: var(--am-blanco);
	cursor: pointer;
	transition: background-color .2s var(--am-curva), border-color .2s var(--am-curva);
}
.am-hero__flecha:hover { background: var(--am-naranja); border-color: var(--am-naranja); color: var(--am-tinta); }

@media (max-width: 760px) {
	.am-hero { min-height: auto; }
	.am-hero__controles-caja { flex-direction: column; align-items: stretch; gap: 1rem; }
	.am-hero__flechas { justify-content: flex-end; }
	.am-hero__punto-etiqueta { font-size: .7rem; }
	.am-hero__acciones .am-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.am-hero__camara,
	.am-hero__lienzo,
	.am-hero__panel { transition-duration: .01ms !important; }
}

/* ---------------------------------------------- 8. Cabecera interior y CTA */
.am-interior {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--am-tinta);
	color: var(--am-blanco);
	padding-block: clamp(3.25rem, 8vw, 6rem);
}

.am-interior__escena { position: absolute; inset: 0; z-index: 0; }

.am-interior__foto {
	width: 100%; height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	filter: saturate(.9);
}

.am-interior__velo {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(94deg, rgba(14, 17, 22, .95) 0%, rgba(14, 17, 22, .76) 48%, rgba(14, 17, 22, .3) 100%),
		linear-gradient(180deg, rgba(14, 17, 22, .5) 0%, rgba(14, 17, 22, .8) 100%);
}

/* El bloque de texto NO puede llevar el max-width encima de .am-contenedor:
   heredaria su `margin-inline: auto` y se centraria en la pantalla, saliendose
   de la reticula que marcan la cabecera y el resto de las secciones. La medida
   se le pone a los hijos. */
.am-interior__caja { position: relative; z-index: 2; }
.am-interior__caja > * { max-width: 48rem; }

.am-interior__titulo {
	font-size: clamp(1.95rem, 4.4vw, 3.1rem);
	font-stretch: 106%;
	color: var(--am-blanco);
	margin-bottom: 1rem;
}

.am-interior__texto {
	max-width: 38rem;
	font-size: clamp(1rem, 1.35vw, 1.12rem);
	color: var(--am-texto-claro-suave);
	margin: 0;
}

.am-migas { margin-bottom: 1.5rem; font-size: .84rem; }

/* Las migas viven en dos contextos: la cabecera interior, que es oscura, y
   el cuerpo claro de articulos y legales. El caso por omision tiene que ser
   el CLARO: con el blanco por defecto, el elemento `aria-current` de un
   articulo salia blanco sobre blanco y el titulo desaparecia. */
.am-migas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	color: var(--am-texto-suave);
}

.am-migas__item + .am-migas__item::before { content: "/"; margin-right: .4rem; opacity: .55; }
.am-migas a { color: inherit; text-decoration: none; }
.am-migas a:hover { color: var(--am-naranja-texto); }
.am-migas [aria-current] { color: var(--am-texto); }

.am-interior .am-migas__lista { color: var(--am-texto-claro-suave); }
.am-interior .am-migas a:hover { color: var(--am-naranja-vivo); }
.am-interior .am-migas [aria-current] { color: var(--am-blanco); }

.am-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--am-tinta);
	color: var(--am-blanco);
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.am-cta__escena { position: absolute; inset: 0; z-index: 0; }

.am-cta__foto {
	width: 100%; height: 100%;
	max-width: none;
	object-fit: cover;
}

.am-cta__velo {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(96deg, rgba(14, 17, 22, .94) 0%, rgba(14, 17, 22, .8) 55%, rgba(217, 65, 15, .55) 100%);
}

.am-cta__caja {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	flex-wrap: wrap;
}

.am-cta__texto { flex: 1 1 28rem; }

.am-cta__titulo {
	font-size: clamp(1.7rem, 3.2vw, 2.5rem);
	font-stretch: 105%;
	color: var(--am-blanco);
	margin-bottom: .85rem;
}

.am-cta__parrafo { max-width: 34rem; color: var(--am-texto-claro-suave); }

.am-cta__acciones { display: flex; flex-wrap: wrap; gap: .85rem; flex: none; }

@media (max-width: 760px) {
	.am-cta__acciones { width: 100%; }
	.am-cta__acciones .am-btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------ 9. Cifras y fichas */
.am-cifras {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	list-style: none;
	background: var(--am-linea);
	border: 1px solid var(--am-linea);
	border-radius: var(--am-radio-grande);
	overflow: hidden;
}

.am-cifra {
	display: grid;
	gap: .3rem;
	padding: clamp(1.25rem, 2.5vw, 1.9rem);
	background: var(--am-blanco);
}

.am-cifra__valor {
	font-family: var(--am-display);
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	font-weight: 800;
	font-stretch: 104%;
	line-height: 1;
	color: var(--am-naranja-texto);
}

.am-cifra__etiqueta {
	font-size: .86rem;
	color: var(--am-texto-suave);
	line-height: 1.35;
}

.am-seccion--oscura .am-cifras,
.am-dos-columnas__texto .am-cifras { margin-top: 2rem; }

@media (max-width: 860px) { .am-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .am-cifras { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ 10. Tarjetas */
.am-tarjeta {
	display: flex;
	flex-direction: column;
	background: var(--am-blanco);
	border: 1px solid var(--am-linea);
	border-radius: var(--am-radio-grande);
	overflow: hidden;
	transition: transform .3s var(--am-curva), box-shadow .3s var(--am-curva), border-color .3s var(--am-curva);
}

.am-tarjeta:hover {
	transform: translateY(-4px);
	box-shadow: var(--am-sombra-alta);
	border-color: rgba(249, 86, 35, .5);
}

.am-tarjeta__foto {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--am-humo-hondo);
}

.am-tarjeta__foto img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s var(--am-curva);
}

.am-tarjeta:hover .am-tarjeta__foto img { transform: scale(1.045); }

.am-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	padding: clamp(1.25rem, 2.4vw, 1.9rem);
	flex: 1 1 auto;
}

.am-tarjeta__icono {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: var(--am-radio);
	background: rgba(249, 86, 35, .12);
	color: var(--am-naranja-texto);
}
.am-tarjeta__icono .am-icono { width: 1.4rem; height: 1.4rem; }

.am-tarjeta__titulo { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.am-tarjeta__titulo a { color: inherit; text-decoration: none; }
.am-tarjeta__titulo a:hover { color: var(--am-naranja-texto); }

.am-tarjeta__gancho {
	margin: 0;
	font-family: var(--am-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--am-naranja-texto);
	line-height: 1.4;
}

.am-tarjeta__texto { margin: 0; color: var(--am-texto-suave); font-size: .96rem; }

.am-tarjeta__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 0;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--am-texto-suave);
}

.am-tarjeta__enlace { margin: auto 0 0; padding-top: .35rem; }

.am-tarjeta__enlace a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--am-display);
	font-weight: 700;
	font-size: .92rem;
	text-decoration: none;
}
.am-tarjeta__enlace .am-icono { width: 1em; height: 1em; transition: transform .25s var(--am-curva); }
.am-tarjeta__enlace a:hover .am-icono { transform: translateX(4px); }

.am-tarjeta--enlace { background: var(--am-humo); }
.am-tarjeta--enlace .am-tarjeta__cuerpo { justify-content: center; }

/* ------------------------------------------------------------- 11. Tablas */
.am-tablas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
}

.am-tabla-caja {
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--am-linea-oscura);
	border-radius: var(--am-radio-grande);
	padding: clamp(1.1rem, 2.2vw, 1.65rem);
}

.am-seccion:not(.am-seccion--oscura) .am-tabla-caja {
	background: var(--am-blanco);
	border-color: var(--am-linea);
}

.am-tabla__titulo {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	letter-spacing: -.005em;
}

.am-tabla-scroll { overflow-x: auto; }

.am-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}

.am-tabla th,
.am-tabla td {
	padding: .68rem .6rem;
	text-align: left;
	border-bottom: 1px solid var(--am-linea-oscura);
	white-space: nowrap;
}

.am-seccion:not(.am-seccion--oscura) .am-tabla th,
.am-seccion:not(.am-seccion--oscura) .am-tabla td { border-bottom-color: var(--am-linea); }

.am-tabla thead th {
	font-family: var(--am-display);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--am-naranja-vivo);
	border-bottom-width: 2px;
}

.am-seccion:not(.am-seccion--oscura) .am-tabla thead th { color: var(--am-naranja-texto); }

.am-tabla tbody th { font-weight: 600; white-space: normal; }
.am-tabla tbody tr:last-child :is(th, td) { border-bottom: 0; }
.am-tabla__vacio { opacity: .45; }

/* ------------------------------------------- 12. Proceso, ventajas, valores */
.am-proceso {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(1.1rem, 2vw, 1.75rem);
	list-style: none;
	counter-reset: paso;
}

.am-proceso__paso {
	position: relative;
	padding-top: 1.6rem;
	border-top: 2px solid var(--am-linea);
}

.am-proceso__paso::after {
	content: "";
	position: absolute;
	top: -2px; left: 0;
	width: 2.5rem; height: 2px;
	background: var(--am-naranja);
}

.am-seccion--oscura .am-proceso__paso { border-top-color: var(--am-linea-oscura); }

.am-proceso__numero {
	display: block;
	margin-bottom: .55rem;
	font-family: var(--am-display);
	font-size: .85rem;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--am-naranja-texto);
}

.am-proceso__titulo { font-size: 1.05rem; margin-bottom: .5rem; }
.am-proceso__texto { margin: 0; font-size: .92rem; color: var(--am-texto-suave); }

@media (max-width: 1080px) { .am-proceso { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .am-proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .am-proceso { grid-template-columns: minmax(0, 1fr); } }

.am-ventaja {
	padding: clamp(1.25rem, 2.4vw, 1.9rem);
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--am-linea-oscura);
	border-radius: var(--am-radio-grande);
}

.am-seccion:not(.am-seccion--oscura) .am-ventaja {
	background: var(--am-blanco);
	border-color: var(--am-linea);
}

.am-ventaja__icono {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	margin-bottom: 1rem;
	border-radius: var(--am-radio);
	background: rgba(249, 86, 35, .14);
	color: var(--am-naranja-vivo);
}

.am-seccion:not(.am-seccion--oscura) .am-ventaja__icono { color: var(--am-naranja-texto); }
.am-ventaja__icono .am-icono { width: 1.35rem; height: 1.35rem; }

.am-ventaja__titulo { font-size: 1.08rem; margin-bottom: .5rem; }
.am-ventaja__texto { margin: 0; font-size: .94rem; }

.am-valor {
	padding: clamp(1.15rem, 2.2vw, 1.7rem);
	background: var(--am-blanco);
	border: 1px solid var(--am-linea);
	border-radius: var(--am-radio-grande);
	border-left: 3px solid var(--am-naranja);
}

.am-valor__marca {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	margin-bottom: .85rem;
	border-radius: 50%;
	background: rgba(249, 86, 35, .14);
	color: var(--am-naranja-texto);
}
.am-valor__marca .am-icono { width: 1.05rem; height: 1.05rem; }

.am-valor__titulo { font-size: 1.02rem; margin-bottom: .45rem; }
.am-valor__texto { margin: 0; font-size: .93rem; color: var(--am-texto-suave); }

.am-material {
	padding: clamp(1.15rem, 2.2vw, 1.7rem);
	background: var(--am-humo);
	border-radius: var(--am-radio-grande);
	border-top: 3px solid var(--am-naranja);
}

.am-seccion--clara .am-material { background: var(--am-blanco); }
.am-material__titulo { font-size: 1.05rem; margin-bottom: .5rem; }
.am-material__texto { margin: 0; font-size: .93rem; color: var(--am-texto-suave); }

.am-mision__bloque {
	padding: clamp(1.5rem, 3vw, 2.4rem);
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--am-linea-oscura);
	border-radius: var(--am-radio-grande);
}

.am-mision__icono {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	margin-bottom: 1.1rem;
	border-radius: var(--am-radio);
	background: rgba(249, 86, 35, .16);
	color: var(--am-naranja-vivo);
}

.am-mision__titulo {
	font-size: 1.35rem;
	margin-bottom: .7rem;
	letter-spacing: .01em;
	text-transform: uppercase;
	font-stretch: 104%;
}

.am-mision__texto { margin: 0; }

/* ------------------------------------------ 13. Dos columnas y largos */
.am-dos-columnas {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(1.75rem, 4vw, 4rem);
	align-items: start;
}

.am-dos-columnas--invertida { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }

.am-dos-columnas__figura {
	margin: 0;
	border-radius: var(--am-radio-grande);
	overflow: hidden;
	position: sticky;
	top: 7rem;
}

.am-dos-columnas__figura img { width: 100%; height: auto; }

.am-dos-columnas__lateral {
	display: grid;
	gap: 1rem;
	position: sticky;
	top: 7rem;
}

@media (max-width: 900px) {
	.am-dos-columnas,
	.am-dos-columnas--invertida { grid-template-columns: minmax(0, 1fr); }
	.am-dos-columnas__figura,
	.am-dos-columnas__lateral { position: static; }
}

.am-ficha {
	padding: 1.35rem;
	background: var(--am-humo);
	border-radius: var(--am-radio-grande);
	border-left: 3px solid var(--am-naranja);
}

.am-ficha--cta { background: var(--am-tinta); color: var(--am-texto-claro); border-left-color: var(--am-naranja); }
.am-ficha--cta .am-ficha__texto { color: var(--am-texto-claro-suave); margin-bottom: 1.1rem; }

.am-ficha__rotulo {
	margin: 0 0 .85rem;
	font-family: var(--am-display);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--am-naranja-texto);
}

.am-ficha__lista { list-style: none; display: grid; gap: .6rem; }

.am-ficha__lista li {
	display: grid;
	grid-template-columns: 1.15rem 1fr;
	gap: .6rem;
	align-items: start;
	font-size: .93rem;
	color: var(--am-texto-suave);
}

.am-ficha__lista .am-icono { width: 1.15rem; height: 1.15rem; margin-top: .18rem; color: var(--am-naranja-texto); }

.am-materiales-largo { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.am-material-largo {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--am-linea);
}

.am-material-largo:last-child { border-bottom: 0; padding-bottom: 0; }

.am-material-largo__indice {
	margin: 0;
	font-family: var(--am-display);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 800;
	line-height: 1;
	color: rgba(249, 86, 35, .35);
}

.am-material-largo__titulo { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: .7rem; }

/* Ficha de material a dos columnas: el nombre a la izquierda y la explicacion
   a la derecha. A una sola columna la explicacion se queda en 38 rem y deja
   medio ancho de pagina vacio. */
@media (min-width: 900px) {
	.am-material-largo__cuerpo {
		display: grid;
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		gap: clamp(1.5rem, 3vw, 3rem);
		align-items: start;
	}

	.am-material-largo__titulo { margin-bottom: 0; }
	.am-material-largo__cuerpo .am-parrafo { max-width: 42rem; }
}

@media (max-width: 600px) {
	.am-material-largo { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}

.am-industrias-largo { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

/* Las columnas tienen que ser IGUALES: con .9fr/1.1fr, al mandar la foto de
   las filas pares a la segunda columna con `order`, las fotos alternaban de
   ancho y la pagina parecia descuadrada. */
.am-industria {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 3.5rem);
	align-items: center;
}

.am-industria:nth-child(even) .am-industria__figura { order: 2; }

.am-industria__figura {
	margin: 0;
	border-radius: var(--am-radio-grande);
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.am-industria__figura img { width: 100%; height: 100%; object-fit: cover; }
.am-industria__titulo { font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin-bottom: .75rem; }

@media (max-width: 800px) {
	.am-industria { grid-template-columns: minmax(0, 1fr); }
	.am-industria:nth-child(even) .am-industria__figura { order: 0; }
}

/* ------------------------------------------------------------ 14. Galeria */
.am-galeria {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(.85rem, 1.6vw, 1.25rem);
}

.am-galeria__item {
	margin: 0;
	position: relative;
	border-radius: var(--am-radio-grande);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--am-humo-hondo);
}

.am-galeria__item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s var(--am-curva);
}

.am-galeria__item:hover img { transform: scale(1.05); }

.am-galeria__pie {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.5rem .9rem .8rem;
	font-size: .82rem;
	line-height: 1.35;
	color: var(--am-blanco);
	background: linear-gradient(180deg, transparent 0%, rgba(14, 17, 22, .88) 65%);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s var(--am-curva), transform .3s var(--am-curva);
}

.am-galeria__item:hover .am-galeria__pie,
.am-galeria__item:focus-within .am-galeria__pie { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) { .am-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .am-galeria { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- 15. FAQ */
.am-faq { display: grid; gap: .65rem; }

.am-faq__item {
	background: var(--am-blanco);
	border: 1px solid var(--am-linea);
	border-radius: var(--am-radio-grande);
	overflow: hidden;
}

.am-faq__item[open] { border-color: rgba(249, 86, 35, .55); }

.am-faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.25rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--am-display);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--am-texto);
}

.am-faq__pregunta::-webkit-details-marker { display: none; }
.am-faq__pregunta:hover { color: var(--am-naranja-texto); }

.am-faq__signo {
	position: relative;
	width: 20px; height: 20px;
	flex: none;
}

.am-faq__signo::before,
.am-faq__signo::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	background: var(--am-naranja-texto);
	transition: transform .25s var(--am-curva);
}

.am-faq__signo::before { width: 14px; height: 2px; margin: -1px 0 0 -7px; }
.am-faq__signo::after { width: 2px; height: 14px; margin: -7px 0 0 -1px; }
.am-faq__item[open] .am-faq__signo::after { transform: scaleY(0); }

.am-faq__respuesta {
	padding: 0 1.25rem 1.25rem;
	color: var(--am-texto-suave);
	font-size: .96rem;
}

.am-seccion--clara .am-faq__item { background: var(--am-blanco); }

/* ----------------------------------------------------------- 16. Contacto */
.am-contacto-rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
}

@media (max-width: 940px) {
	.am-contacto-rejilla { grid-template-columns: minmax(0, 1fr); }
}

.am-contacto-rejilla__datos { display: grid; gap: 1rem; }

.am-panel {
	padding: clamp(1.25rem, 2.4vw, 1.85rem);
	background: var(--am-humo);
	border-radius: var(--am-radio-grande);
	border: 1px solid var(--am-linea);
}

.am-panel--acento {
	background: var(--am-tinta);
	border-color: var(--am-tinta);
	color: var(--am-texto-claro);
}
.am-panel--acento .am-panel__titulo { color: var(--am-blanco); }
.am-panel--acento .am-panel__texto { color: var(--am-texto-claro-suave); margin-bottom: 1.2rem; }

.am-panel__titulo { font-size: 1.15rem; margin-bottom: 1.1rem; }

.am-contactos { list-style: none; display: grid; gap: 1.05rem; }

.am-contacto {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr);
	gap: .85rem;
	align-items: start;
}

.am-contacto__icono {
	display: grid;
	place-items: center;
	width: 2.4rem; height: 2.4rem;
	border-radius: var(--am-radio);
	background: rgba(249, 86, 35, .14);
	color: var(--am-naranja-texto);
}

.am-contacto__cuerpo { display: block; min-width: 0; }

.am-contacto__etiqueta {
	display: block;
	font-family: var(--am-display);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--am-texto-suave);
	margin-bottom: .15rem;
}

/* Los <span> anidados no se apilan solos: sin display:block salen en la
   misma linea que la etiqueta. */
.am-contacto__valor {
	display: block;
	font-size: .98rem;
	font-weight: 600;
	color: var(--am-texto);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.am-contacto__valor:hover { color: var(--am-naranja-texto); }
.am-contacto__valor--secundario { font-weight: 500; color: var(--am-texto-suave); }

.am-contactos--oscura .am-contacto__icono { background: rgba(249, 86, 35, .2); color: var(--am-naranja-vivo); }
.am-contactos--oscura .am-contacto__etiqueta { color: var(--am-texto-claro-suave); }
.am-contactos--oscura .am-contacto__valor { color: var(--am-texto-claro); }
.am-contactos--oscura a.am-contacto__valor:hover { color: var(--am-naranja-vivo); }
.am-contactos--oscura .am-contacto__valor--secundario { color: var(--am-texto-claro-suave); }

.am-personas { list-style: none; display: grid; gap: 1rem; }

.am-persona {
	display: grid;
	gap: .1rem;
	padding-left: .85rem;
	border-left: 2px solid var(--am-naranja);
}

.am-persona__nombre { font-family: var(--am-display); font-weight: 700; font-size: 1rem; }
.am-persona__puesto { font-size: .84rem; color: var(--am-texto-suave); }
.am-persona__dato { font-size: .9rem; color: var(--am-naranja-texto); text-decoration: none; overflow-wrap: anywhere; }

.am-mapa { line-height: 0; filter: saturate(.85); }
.am-mapa iframe { width: 100%; height: 460px; border: 0; }

/* -------------------------------------------------------- 17. Formulario */
.am-formulario {
	padding: clamp(1.35rem, 3vw, 2.4rem);
	background: var(--am-blanco);
	border: 1px solid var(--am-linea);
	border-radius: var(--am-radio-grande);
	box-shadow: var(--am-sombra);
}

.am-formulario__titulo { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin-bottom: .75rem; }
.am-formulario__intro { color: var(--am-texto-suave); margin-bottom: 1.75rem; }

.am-form__rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.05rem;
}

@media (max-width: 620px) { .am-form__rejilla { grid-template-columns: minmax(0, 1fr); } }

.am-campo { margin: 0; display: grid; gap: .35rem; }
.am-campo--ancho { grid-column: 1 / -1; }

.am-campo__etiqueta {
	font-family: var(--am-display);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--am-texto);
}

.am-campo__req { color: var(--am-naranja-texto); font-weight: 600; text-transform: none; letter-spacing: 0; }

.am-campo__control {
	width: 100%;
	padding: .8rem .9rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--am-texto);
	background: var(--am-blanco);
	border: 1px solid var(--am-linea);
	border-radius: var(--am-radio);
	transition: border-color .2s var(--am-curva), box-shadow .2s var(--am-curva);
}

.am-campo__control:focus {
	border-color: var(--am-naranja);
	box-shadow: 0 0 0 3px rgba(249, 86, 35, .18);
	outline: none;
}

textarea.am-campo__control { resize: vertical; min-height: 8rem; }

.am-campo__ayuda { font-size: .82rem; color: var(--am-texto-suave); }
.am-campo__error { font-size: .85rem; font-weight: 600; color: #a5200b; }
.am-campo--error .am-campo__control { border-color: #a5200b; }

.am-campo--casilla {
	display: grid;
	grid-template-columns: 1.2rem minmax(0, 1fr);
	gap: .65rem;
	align-items: start;
	margin-top: 1.25rem;
	font-size: .92rem;
	color: var(--am-texto-suave);
}

.am-campo--casilla input { margin-top: .28rem; accent-color: var(--am-naranja); width: 1.1rem; height: 1.1rem; }
.am-campo--casilla .am-campo__error { grid-column: 2; }

.am-form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.am-form__acciones { margin: 1.5rem 0 0; }
.am-form__acciones .am-btn { width: 100%; }

@media (min-width: 620px) { .am-form__acciones .am-btn { width: auto; min-width: 15rem; } }

.am-aviso {
	padding: .9rem 1.1rem;
	margin-bottom: 1.25rem;
	border-radius: var(--am-radio);
	font-size: .94rem;
	font-weight: 500;
}

.am-aviso--error { background: #fdecea; border-left: 3px solid #a5200b; color: #7a1808; }
.am-aviso--bien { background: #e9f6ec; border-left: 3px solid #1c6b31; color: #145124; }

/* ------------------------------------------------------------ 18. Articulo */
.am-articulo__cabecera { padding-top: clamp(2rem, 5vw, 3.5rem); }

.am-articulo__titulo {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	font-stretch: 105%;
	margin-bottom: 1rem;
	text-wrap: pretty;
}

.am-articulo__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.25rem;
	font-size: .84rem;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--am-texto-suave);
}

.am-articulo__entrada {
	font-size: 1.15rem;
	color: var(--am-texto);
	max-width: 40rem;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.am-articulo__figura {
	margin: 0 0 clamp(2rem, 4vw, 3.25rem);
	max-width: var(--am-ancho);
	margin-inline: auto;
	padding-inline: var(--am-canal);
}

.am-articulo__figura img {
	width: 100%;
	border-radius: var(--am-radio-grande);
}

.am-articulo__caja {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 900px) {
	.am-articulo__caja { grid-template-columns: minmax(0, 1fr); }
}

.am-indice {
	position: sticky;
	top: 7rem;
	padding: 1.25rem;
	background: var(--am-humo);
	border-radius: var(--am-radio-grande);
	border-left: 3px solid var(--am-naranja);
}

@media (max-width: 900px) { .am-indice { position: static; } }

.am-indice__rotulo {
	margin: 0 0 .8rem;
	font-family: var(--am-display);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--am-naranja-texto);
}

.am-indice__lista { list-style: none; counter-reset: idx; display: grid; gap: .55rem; }

.am-indice__lista li { counter-increment: idx; font-size: .89rem; line-height: 1.4; }
.am-indice__lista li::before { content: counter(idx, decimal-leading-zero) ". "; color: var(--am-naranja-texto); font-weight: 700; }
.am-indice__lista a { color: var(--am-texto-suave); text-decoration: none; }
.am-indice__lista a:hover { color: var(--am-naranja-texto); text-decoration: underline; }

/* La medida de un articulo va en rem, no en ch: `ch` es relativo a la fuente
   del propio elemento, asi que los h2 calculan una medida mayor y se salen
   de la columna del texto. */
.am-articulo__cuerpo { max-width: 42rem; }

.am-articulo__cuerpo > * { max-width: 42rem; }

.am-articulo__cuerpo p {
	margin-bottom: 1.25em;
	color: var(--am-texto-suave);
	font-size: 1.03rem;
}

.am-articulo__cuerpo h2 {
	margin: 2.4rem 0 .9rem;
	font-size: clamp(1.35rem, 2.6vw, 1.8rem);
	scroll-margin-top: 7rem;
}

.am-articulo__cuerpo h3 {
	margin: 1.8rem 0 .7rem;
	font-size: clamp(1.1rem, 2vw, 1.28rem);
}

.am-articulo__cuerpo ul {
	list-style: none;
	margin: 0 0 1.35em;
	display: grid;
	gap: .55rem;
}

.am-articulo__cuerpo ul li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--am-texto-suave);
}

.am-articulo__cuerpo ul li::before {
	content: "";
	position: absolute;
	left: 0; top: .62em;
	width: .55rem; height: 2px;
	background: var(--am-naranja);
}

.am-articulo__cuerpo strong { color: var(--am-texto); font-weight: 700; }

.am-articulo__cuerpo blockquote {
	margin: 1.9rem 0;
	padding: 1.2rem 1.4rem;
	background: var(--am-humo);
	border-left: 3px solid var(--am-naranja);
	border-radius: 0 var(--am-radio-grande) var(--am-radio-grande) 0;
}

.am-articulo__cuerpo blockquote p {
	margin: 0;
	font-family: var(--am-display);
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--am-texto);
}

.am-articulo__cierre {
	margin-top: clamp(2.25rem, 4vw, 3.25rem);
	padding: clamp(1.35rem, 2.6vw, 2rem);
	background: var(--am-tinta);
	border-radius: var(--am-radio-grande);
	color: var(--am-texto-claro);
}

.am-articulo__cierre-texto {
	margin-bottom: 1.15rem;
	font-family: var(--am-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--am-blanco);
}

.am-articulo__volver { margin-top: 2rem; }

.am-articulo__volver a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--am-display);
	font-weight: 700;
	text-decoration: none;
}

/* -------------------------------------------------- 19. Gracias, 404, legal */
.am-gracias__marca {
	display: grid;
	place-items: center;
	width: 64px; height: 64px;
	margin-bottom: 1.5rem;
	border-radius: 50%;
	background: rgba(249, 86, 35, .14);
	color: var(--am-naranja-texto);
}
.am-gracias__marca .am-icono { width: 2rem; height: 2rem; }

.am-gracias__subtitulo { margin: 2.5rem 0 1rem; font-size: 1.25rem; }

.am-gracias__lista,
.am-error__enlaces { list-style: none; display: grid; gap: .6rem; margin-top: 1.5rem; }

.am-gracias__lista a,
.am-error__enlaces a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .95rem 1.15rem;
	background: var(--am-humo);
	border-radius: var(--am-radio);
	font-family: var(--am-display);
	font-weight: 600;
	color: var(--am-texto);
	text-decoration: none;
	transition: background-color .2s var(--am-curva), color .2s var(--am-curva);
}

.am-gracias__lista a:hover,
.am-error__enlaces a:hover { background: var(--am-tinta); color: var(--am-blanco); }

.am-error__codigo {
	font-family: var(--am-display);
	font-size: clamp(4rem, 14vw, 9rem);
	font-weight: 800;
	line-height: .85;
	letter-spacing: -.04em;
	color: rgba(249, 86, 35, .22);
	margin: 0 0 .5rem;
}

.am-legal { max-width: 42rem; }
.am-legal__fecha { font-size: .88rem; color: var(--am-texto-suave); margin-bottom: 2rem; }
.am-legal__bloque { margin-bottom: 2.25rem; }
.am-legal__titulo { font-size: 1.2rem; margin-bottom: .75rem; }

.am-legal__lista { list-style: none; display: grid; gap: .5rem; margin: 0 0 1.2rem; }

.am-legal__lista li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--am-texto-suave);
}

.am-legal__lista li::before {
	content: "";
	position: absolute;
	left: 0; top: .62em;
	width: .55rem; height: 2px;
	background: var(--am-naranja);
}

.am-resultados { list-style: none; display: grid; gap: 1.25rem; }
.am-resultado { padding-bottom: 1.25rem; border-bottom: 1px solid var(--am-linea); }
.am-resultado__titulo { font-size: 1.2rem; margin-bottom: .4rem; }
.am-resultado__titulo a { color: var(--am-texto); text-decoration: none; }
.am-resultado__titulo a:hover { color: var(--am-naranja-texto); }
.am-resultado__texto { margin: 0; color: var(--am-texto-suave); font-size: .95rem; }

/* --------------------------------------------------------------- 20. Pie */
.am-pie {
	background: var(--am-tinta);
	background-image:
		radial-gradient(90% 120% at 100% 0%, rgba(249, 86, 35, .13) 0%, transparent 62%);
	color: var(--am-texto-claro-suave);
	padding-top: clamp(3rem, 6vw, 4.5rem);
}

/* El pie es contexto oscuro pero no lleva .am-seccion--oscura: hay que
   incluirlo explicitamente donde se decide el color del texto. */
.am-pie :is(h1, h2, h3, h4) { color: var(--am-blanco); }

.am-pie__caja {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

@media (max-width: 960px) {
	.am-pie__caja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.am-pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.am-pie__caja { grid-template-columns: minmax(0, 1fr); }
}

.am-pie__logo { width: clamp(170px, 22vw, 220px); height: auto; margin-bottom: 1.25rem; }
.am-pie__lema { max-width: 24rem; font-size: .95rem; margin-bottom: 1.5rem; }
.am-pie__botones { display: flex; flex-wrap: wrap; gap: .75rem; }

.am-pie__rotulo {
	margin: 0 0 1.1rem;
	font-family: var(--am-display);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--am-naranja-vivo);
}

.am-pie__lista { list-style: none; display: grid; gap: .55rem; }
.am-pie__lista a { color: var(--am-texto-claro); text-decoration: none; font-size: .95rem; }
.am-pie__lista a:hover { color: var(--am-naranja-vivo); }
.am-pie__subitem { padding-left: .9rem; border-left: 1px solid var(--am-linea-oscura); }
.am-pie__subitem a { color: var(--am-texto-claro-suave); font-size: .9rem; }

.am-pie__mapa { margin-top: 1.25rem; }

.am-pie__mapa a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--am-display);
	font-weight: 700;
	font-size: .92rem;
	color: var(--am-naranja-vivo);
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
}

.am-pie__legal { border-top: 1px solid var(--am-linea-oscura); }

.am-pie__legal-caja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding-block: 1.35rem;
	font-size: .85rem;
}

.am-pie__copy,
.am-pie__credito { margin: 0; }
.am-pie__credito a { color: var(--am-naranja-vivo); text-decoration: none; }
.am-pie__credito a:hover { text-decoration: underline; }

.am-flotante {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 50;
	width: 54px; height: 54px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #25d366;
	color: #08331a;
	box-shadow: var(--am-sombra-alta);
	transition: transform .25s var(--am-curva);
}
.am-flotante:hover { transform: scale(1.06); color: #08331a; }
.am-flotante .am-icono { width: 1.6rem; height: 1.6rem; }

@media print {
	.am-cabecera, .am-flotante, .am-cta, .am-hero__controles { display: none !important; }
	body { color: #000; }
}

/* ----------------------------------------------------------- 21. Revelado */
.am-revela {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s var(--am-curva), transform .7s var(--am-curva-fuerte);
}

.am-revela.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.am-revela { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------- 22. Alineado de las fichas */
/* En una fila de tarjetas, un titulo que cae a dos lineas desplaza hacia
   abajo todo el texto de esa tarjeta y la fila queda desalineada. Se les
   reserva la altura de dos renglones, pero solo cuando de verdad estan
   una junto a otra. */
@media (min-width: 681px) {
	.am-proceso__titulo,
	.am-ventaja__titulo,
	.am-material__titulo,
	.am-valor__titulo,
	.am-tarjeta--industria .am-tarjeta__titulo { min-height: 2.2em; }

	.am-tarjeta--servicio .am-tarjeta__gancho { min-height: 2.9em; }

	/* La linea de meta del blog cae a dos renglones en unas tarjetas y no en
	   otras segun lo larga que sea la fecha; se le reserva la altura. */
	.am-tarjeta--articulo .am-tarjeta__meta { min-height: 2.5em; }
}

.am-tarjeta__meta time { white-space: nowrap; }

/* Las cifras dentro de la columna de texto de «Quienes somos» no caben a
   cuatro: «1,350 mm» se parte en dos renglones. Ahi van a dos columnas y con
   el numero un punto mas chico. */
.am-dos-columnas__texto .am-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.am-dos-columnas__texto .am-cifra__valor { font-size: clamp(1.35rem, 2.1vw, 1.8rem); }