/*
Theme Name: Portafolio Antonio Mendoza
Theme URI: https://antoniomkt.site
Author: Antonio Mendoza
Author URI: https://antoniomkt.site
Description: Tema de bloques (Full Site Editing) para portafolio profesional. Diseño oscuro, editable 100% desde Apariencia → Editor. Sin page builders ni plugins obligatorios.
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 7.4
Version: 3.8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portafolio-am
Tags: full-site-editing, block-patterns, portfolio, dark, one-column, block-styles
*/

/* ============================================================
   La mayoría del diseño vive en theme.json.
   Aquí solo lo que theme.json no puede expresar.
   ============================================================ */

:root {
	--am-linea:   #262A3D;
	--am-vidrio:  rgba(255, 255, 255, .04);
	--am-borde:   rgba(255, 255, 255, .09);
	--am-acento:  #7B5CFA;
	--am-luz:     #A78BFA;
	--am-exito:   #10D9A0;
	--am-apagado: #8C92AC;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }

::selection { background: var(--am-acento); color: #fff; }

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

/* ============================================================
   1. CABECERA PEGAJOSA
   ============================================================ */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 11, 20, .78);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease, background .3s ease;
}
.am-scroll .wp-site-blocks > header.wp-block-template-part {
	border-bottom-color: var(--am-linea);
	background: rgba(10, 11, 20, .92);
}

/* Navegación */
.wp-block-navigation .wp-block-navigation-item__content {
	padding: 7px 12px;
	border-radius: 8px;
	transition: color .18s ease, background .18s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #EDEEF6;
	background: var(--am-vidrio);
	text-decoration: none;
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: #EDEEF6;
	background: var(--am-vidrio);
}

/* Menú móvil desplegado */
.wp-block-navigation__responsive-container.is-menu-open {
	background: #0A0B14 !important;
	padding: 32px clamp(20px, 5vw, 40px);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	padding: 12px 0;
}

/* ============================================================
   2. UTILIDADES DE SECCIÓN
   ============================================================ */

/* Resplandor de fondo (hero) */
.am-aurora { position: relative; overflow: hidden; isolation: isolate; }
.am-aurora::before {
	content: "";
	position: absolute;
	inset: -40% 30% 40% -15%;
	z-index: -1;
	background:
		radial-gradient(45% 50% at 25% 40%, rgba(123, 92, 250, .38), transparent 70%),
		radial-gradient(38% 44% at 80% 25%, rgba(16, 217, 160, .16), transparent 70%);
	filter: blur(20px);
	pointer-events: none;
}

/* Malla de puntos decorativa */
.am-puntos { position: relative; }
.am-puntos::after {
	content: "";
	position: absolute;
	top: 12%;
	right: 4%;
	width: 120px;
	height: 90px;
	background-image: radial-gradient(circle, rgba(255,255,255,.22) 1.4px, transparent 1.4px);
	background-size: 16px 16px;
	pointer-events: none;
}

/* Tarjeta de vidrio */
.am-tarjeta {
	border: 1px solid var(--am-borde);
	border-radius: 20px;
	background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
	transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s ease, box-shadow .28s ease;
}
.am-tarjeta:hover {
	transform: translateY(-5px);
	border-color: rgba(167, 139, 250, .45);
	box-shadow: 0 14px 44px rgba(0, 0, 0, .45);
}

/* Etiqueta / eyebrow */
.am-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px;
	border: 1px solid rgba(167, 139, 250, .3);
	border-radius: 999px;
	background: rgba(123, 92, 250, .12);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--am-luz);
}
.am-etiqueta::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--am-luz);
	box-shadow: 0 0 0 4px rgba(167, 139, 250, .18);
}

/* Título de sección centrado con subrayado corto */
.am-titulo-sec { text-align: center; }
.am-titulo-sec::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	margin: 18px auto 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--am-acento), var(--am-luz));
}

/* Chips de herramientas */
.am-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0; list-style: none; }
.am-chips li {
	padding: 8px 16px;
	border: 1px solid var(--am-borde);
	border-radius: 999px;
	background: var(--am-vidrio);
	font-size: .9375rem;
	font-weight: 500;
	color: #C6CADB;
}

/* Etiquetas pequeñas dentro de tarjetas */
.am-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.am-tags li {
	padding: 4px 11px;
	border-radius: 6px;
	background: rgba(123, 92, 250, .16);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 500;
	color: var(--am-luz);
}

/* ============================================================
   3. MÉTRICAS
   ============================================================ */
.am-metricas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.am-metrica {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px;
	border: 1px solid var(--am-borde);
	border-radius: 16px;
	background: var(--am-vidrio);
}
.am-metrica__icono {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--am-acento), var(--am-luz));
	color: #fff;
}
.am-metrica__icono svg { width: 22px; height: 22px; }
.am-metrica__texto b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.1;
	color: #EDEEF6;
	font-variant-numeric: tabular-nums;
}
.am-metrica__texto > span { font-size: .875rem; color: var(--am-apagado); }

/* ============================================================
   4. BARRAS DE HABILIDAD
   ============================================================ */
.am-habilidades {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 40px;
}
.am-hab { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px 14px; }

.am-hab__logo {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--am-vidrio);
	border: 1px solid var(--am-borde);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 700;
	color: var(--am-luz);
}
.am-hab__nombre { font-size: .9375rem; font-weight: 600; color: #EDEEF6; }
.am-hab__pct {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	color: var(--am-apagado);
	font-variant-numeric: tabular-nums;
}
.am-hab__barra {
	grid-column: 2 / -1;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	overflow: hidden;
}
.am-hab__barra i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--am-acento), var(--am-luz));
	transform-origin: left;
	animation: am-crecer 1.1s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes am-crecer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============================================================
   5. TARJETAS DE PROYECTO / CASO
   ============================================================ */
.am-proyecto { overflow: hidden; }
.am-proyecto figure { margin: 0; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1A1D2E; }
.am-proyecto figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.am-proyecto:hover figure img { transform: scale(1.05); }
.am-proyecto__num {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 4px 10px;
	border-radius: 8px;
	background: rgba(10, 11, 20, .75);
	backdrop-filter: blur(6px);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 600;
	color: var(--am-luz);
}
.am-proyecto__cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.am-proyecto__cuerpo h3 { font-size: 1.1875rem; margin: 0; }
.am-proyecto__cuerpo p { margin: 0; font-size: .9375rem; color: var(--am-apagado); }
.am-proyecto__link {
	margin-top: 6px;
	font-size: .875rem;
	font-weight: 600;
	color: var(--am-luz);
	text-decoration: none;
}
.am-proyecto__link:hover { text-decoration: underline; }

/* KPI grande dentro de casos */
.am-kpi { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 26px; }
.am-kpi b {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -.045em;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.am-kpi span { font-size: .9375rem; color: var(--am-apagado); }
.am-caso__extra {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--am-borde);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 500;
	color: var(--am-exito);
}

/* ============================================================
   6. PROCESO
   ============================================================ */
.am-proceso { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; padding: 0; margin: 0; list-style: none; counter-reset: am-paso; }
.am-paso { display: flex; gap: 18px; padding: 26px 0; border-top: 1px solid var(--am-linea); }
.am-paso__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(123, 92, 250, .14);
	border: 1px solid rgba(167, 139, 250, .28);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 600;
	color: var(--am-luz);
}
.am-paso h3 { margin: 0 0 6px; font-size: 1.125rem; }
.am-paso p { margin: 0; font-size: .9375rem; color: var(--am-apagado); }

/* ============================================================
   7. TESTIMONIOS
   ============================================================ */
.am-testimonio { display: flex; flex-direction: column; padding: 28px; }
.am-testimonio__comillas { font-family: var(--wp--preset--font-family--display); font-size: 2.5rem; line-height: 1; color: var(--am-acento); opacity: .6; }
.am-testimonio blockquote { margin: 12px 0 0; padding: 0; border: 0; font-size: 1rem; line-height: 1.6; color: #D3D7E6; }
.am-testimonio__autor { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 24px; }
.am-testimonio__autor img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--am-linea); }
.am-testimonio__datos strong { display: block; font-size: .9375rem; color: #EDEEF6; }
.am-testimonio__datos > span { font-size: .8125rem; color: var(--am-apagado); }

/* ============================================================
   8. FAQ (bloque core/details)
   ============================================================ */
.wp-block-details {
	padding: 4px 0;
	border-bottom: 1px solid var(--am-linea);
}
.wp-block-details summary {
	padding: 20px 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 600;
	color: #EDEEF6;
	cursor: pointer;
	transition: color .18s ease;
}
.wp-block-details summary:hover { color: var(--am-luz); }
.wp-block-details[open] summary { color: var(--am-luz); }
.wp-block-details p { padding-bottom: 20px; font-size: .9375rem; }

/* ============================================================
   9. FORMULARIO DE CONTACTO
   ============================================================ */
.am-form { display: grid; gap: 16px; }
.am-form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.am-campo { display: grid; gap: 7px; }
.am-campo > span { font-size: .875rem; font-weight: 600; color: #C6CADB; }
.am-campo input,
.am-campo textarea,
.am-campo select {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--am-borde);
	border-radius: 10px;
	background: rgba(0, 0, 0, .3);
	color: #EDEEF6;
	font-family: inherit;
	font-size: 1rem;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.am-campo textarea { resize: vertical; min-height: 110px; }
.am-campo input::placeholder, .am-campo textarea::placeholder { color: #666C85; }
.am-campo input:focus, .am-campo textarea:focus, .am-campo select:focus {
	outline: none;
	border-color: var(--am-luz);
	background: rgba(0, 0, 0, .45);
	box-shadow: 0 0 0 3px rgba(167, 139, 250, .2);
}
.am-form button {
	padding: 14px 24px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--am-acento), var(--am-luz));
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	box-shadow: 0 6px 20px rgba(123, 92, 250, .32);
}
.am-form button:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 28px rgba(123, 92, 250, .42); }
.am-form__nota { margin: 0; font-size: .8125rem; color: var(--am-apagado); text-align: center; }
.am-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.am-aviso { padding: 14px 18px; border-radius: 10px; font-size: .9375rem; font-weight: 500; }
.am-aviso--ok    { background: rgba(16, 217, 160, .14); border: 1px solid rgba(16, 217, 160, .38); color: #6BE9C6; }
.am-aviso--error { background: rgba(240, 68, 68, .13);  border: 1px solid rgba(240, 68, 68, .36);  color: #FF9E9E; }

/* Datos de contacto en lista */
.am-contactos { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.am-contactos li { display: flex; align-items: center; gap: 12px; font-size: .9375rem; color: #C6CADB; }
.am-contactos svg { flex: none; width: 20px; height: 20px; color: var(--am-luz); }
.am-contactos a { color: inherit; text-decoration: none; }
.am-contactos a:hover { color: var(--am-luz); }

/* Redes */
.am-redes { display: flex; gap: 12px; padding: 0; margin: 0; list-style: none; }
.am-redes a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--am-borde);
	border-radius: 12px;
	background: var(--am-vidrio);
	color: #C6CADB;
	transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.am-redes a:hover { color: var(--am-luz); border-color: rgba(167,139,250,.5); transform: translateY(-3px); }
.am-redes svg { width: 19px; height: 19px; }

/* ============================================================
   10. WHATSAPP FLOTANTE
   ============================================================ */
.am-wa {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	box-shadow: 0 8px 26px rgba(37, 211, 102, .42);
	transition: transform .2s ease, box-shadow .2s ease;
}
.am-wa:hover { transform: scale(1.08); box-shadow: 0 12px 34px rgba(37, 211, 102, .55); }
.am-wa svg { width: 27px; height: 27px; }

/* ============================================================
   11. APARICIÓN AL HACER SCROLL
   ============================================================ */
/* Se usa la propiedad `translate` (no `transform`) para no pisar los
   efectos de hover de las tarjetas, que sí usan transform. */
.am-reveal {
	opacity: 0;
	translate: 0 20px;
	transition: opacity .65s cubic-bezier(.2,.7,.3,1), translate .65s cubic-bezier(.2,.7,.3,1);
}
.am-reveal.am-visible { opacity: 1; translate: 0 0; }

/* En el editor no se anima nada, para poder trabajar. */
.editor-styles-wrapper .am-reveal { opacity: 1; translate: 0 0; }
.editor-styles-wrapper .am-hab__barra i { animation: none; }

/* ============================================================
   12. REJILLAS Y PIEZAS SUELTAS
   ============================================================ */
.am-rejilla { display: grid; gap: 20px; }
.am-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.am-rejilla--3 { grid-template-columns: repeat(3, 1fr); }

/* Tarjeta de servicio */
.am-servicio { display: flex; flex-direction: column; gap: 12px; padding: 30px; }
.am-servicio__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--am-luz);
}
.am-servicio h3 { margin: 6px 0 0; font-size: 1.25rem; }
.am-servicio p { margin: 0; font-size: .9375rem; color: var(--am-apagado); }
.am-servicio .am-tags { margin-top: auto; padding-top: 14px; }

/* Tarjeta de caso */
.am-caso { display: flex; flex-direction: column; padding: 30px; }
.am-caso__cliente {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--am-luz);
}
.am-caso__reto { margin: 14px 0 0; font-size: .9375rem; color: var(--am-apagado); }

/* Foto con marco */
.am-foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.am-hero-visual { position: relative; }
.am-hero-visual .am-foto { margin: 0; }

/* Panel flotante de métricas sobre la foto */
.am-panel {
	position: absolute;
	right: -14px;
	bottom: 34px;
	width: min(250px, 74%);
	padding: 16px 18px;
	border: 1px solid var(--am-borde);
	border-radius: 16px;
	background: rgba(18, 20, 31, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.am-panel__cab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--am-borde);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--am-apagado);
}
.am-panel__punto {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--am-exito);
	box-shadow: 0 0 0 3px rgba(16, 217, 160, .22);
}
.am-panel__datos { display: grid; gap: 9px; margin: 0; }
.am-panel__datos > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.am-panel__datos dt { font-size: .8125rem; color: var(--am-apagado); }
.am-panel__datos dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .9375rem;
	font-weight: 600;
	color: #EDEEF6;
	font-variant-numeric: tabular-nums;
}
.am-panel__ok { color: var(--am-exito) !important; }

/* Chips alineados a la izquierda (hero) */
.am-chips--izq { justify-content: flex-start; }
.am-chips--izq li { font-size: .875rem; padding: 6px 13px; }

/* Lista con palomitas */
.wp-block-list.am-checks { display: grid; gap: 12px; padding: 0; list-style: none; }
.wp-block-list.am-checks li {
	position: relative;
	padding-left: 32px;
	font-size: .9375rem;
	font-weight: 500;
	color: #C6CADB;
}
.wp-block-list.am-checks li::before {
	content: "";
	position: absolute;
	left: 0; top: 3px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: rgba(16, 217, 160, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310D9A0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Caja del formulario */
.am-caja-form { padding: 32px; }

/* Enlaces del pie */
.wp-block-list.am-lista-pie { display: grid; gap: 10px; padding: 0; list-style: none; }
.wp-block-list.am-lista-pie a { color: var(--am-apagado); text-decoration: none; font-size: .9375rem; transition: color .18s ease; }
.wp-block-list.am-lista-pie a:hover { color: #EDEEF6; text-decoration: none; }

/* Tarjetas de entrada del blog */
.am-entrada { overflow: hidden; }
.am-entrada .wp-block-post-featured-image { margin: 0; }
.am-entrada .wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.am-entrada .wp-block-post-title { margin: 0; }
.am-entrada .wp-block-post-title a { color: #EDEEF6; text-decoration: none; }
.am-entrada .wp-block-post-title a:hover { color: var(--am-luz); }
.am-entrada .wp-block-post-date { color: var(--am-apagado); }
.am-entrada .wp-block-post-excerpt__excerpt { color: var(--am-apagado); }
.am-entrada .wp-block-post-excerpt__more-link { display: none; }

/* Paginación del blog */
.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--am-borde);
	border-radius: 10px;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	color: #C6CADB;
}
.wp-block-query-pagination .current { background: var(--am-acento); border-color: var(--am-acento); color: #fff; }

/* Botón de la cabecera: se oculta cuando ya está el menú hamburguesa */
@media (max-width: 900px) {
	.am-cta-cab { display: none; }
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
	.am-metricas { grid-template-columns: repeat(2, 1fr); }
	.am-habilidades { grid-template-columns: repeat(2, 1fr); }
	.am-rejilla--3 { grid-template-columns: repeat(2, 1fr); }
	.am-rejilla--3 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
	html { scroll-padding-top: 84px; }
	.am-proceso { grid-template-columns: 1fr; gap: 0; }
	.am-paso:first-child { border-top: 0; }
	.am-puntos::after { display: none; }
	.am-panel { position: static; width: 100%; margin-top: 16px; }
	.am-hero-visual .am-foto img { aspect-ratio: 3 / 3.2; }
}

@media (max-width: 600px) {
	.am-metricas, .am-habilidades { grid-template-columns: 1fr; }
	.am-rejilla--2, .am-rejilla--3 { grid-template-columns: 1fr; }
	.am-rejilla--3 > *:last-child:nth-child(odd) { grid-column: auto; }
	.am-form__fila { grid-template-columns: 1fr; }
	.am-caja-form, .am-servicio, .am-caso { padding: 24px; }
	.am-wa { width: 52px; height: 52px; right: 16px; bottom: 16px; }
	.am-titulo-sec::after { margin-top: 14px; }
}

/* ============================================================
   13. IMPRESIÓN
   ============================================================ */
@media print {
	.am-wa, header.wp-block-template-part, .am-form { display: none !important; }
	.am-reveal { opacity: 1 !important; translate: none !important; }
	body { background: #fff !important; color: #000 !important; }
}

/* ============================================================
   CORRECCION: Elementor sigue activo y su "kit" global pinta el
   body de blanco, lo que borraba los titulares del tema oscuro.
   Devolvemos el fondo y el color de texto del tema.
   Si algun dia se desactiva Elementor, este bloque es inofensivo.
   ============================================================ */
body,
body[class*="elementor-kit-"],
body[class*="elementor-page-"],
html body[class*="elementor-page-"]:not(.no-existe) {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contraste) !important;
}

/* Las metricas no deben partir las cifras en vertical cuando el
   espacio se estrecha: mejor menos columnas que numeros rotos. */
/* Es una rejilla, no un flex: el ancho fijo de 4 columnas desbordaba
   cuando las metricas van junto a un texto. Que se ajusten solas. */
.am-metricas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.am-metrica { min-width: 0; }
.am-metrica__texto b { white-space: nowrap; }

/* ------------------------------------------------------------
   Cabecera en movil: el boton "Agenda una llamada" no se estaba
   ocultando (la regla del tema perdia frente al CSS de bloques,
   que carga despues) y ensanchaba la pagina entera, provocando
   scroll horizontal en toda la web. Se fuerza y ademas se deja
   que la cabecera envuelva en vez de desbordar.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
	.am-cta-cab,
	.wp-block-buttons.am-cta-cab { display: none !important; }
}

.wp-site-blocks > header.wp-block-template-part .wp-block-group { min-width: 0; }

/* Ninguna imagen debe empujar el ancho de la pagina. */
img, svg, video { max-width: 100%; height: auto; }

/* ============================================================
   CABECERA FLOTANTE EN PASTILLA
   La barra deja de ocupar todo el ancho: flota como una capsula
   con el menu en mayusculas y botones circulares a la derecha.
   ============================================================ */
.wp-site-blocks > header.wp-block-template-part,
.am-scroll .wp-site-blocks > header.wp-block-template-part {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 0;
}

.am-pastilla {
	background: rgba(18, 20, 31, .72);
	backdrop-filter: saturate(160%) blur(16px);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	border: 1px solid var(--am-borde);
	border-radius: 999px;
	padding: 8px 10px 8px 20px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .38);
	transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.am-scroll .am-pastilla {
	background: rgba(18, 20, 31, .93);
	border-color: var(--am-linea);
	box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
}

.am-marca { flex: 0 0 auto; }
.am-marca .wp-block-site-title a { text-decoration: none; }

/* Menu: mayusculas espaciadas, como el referente */
.am-pastilla .wp-block-navigation .wp-block-navigation-item__content {
	text-transform: uppercase;
	letter-spacing: .13em;
	font-size: .72rem;
	font-weight: 600;
	padding: 8px 11px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Botones circulares */
.am-acciones {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}
.am-icono-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--am-borde);
	color: #C6CADB;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.am-icono-btn:hover {
	background: var(--am-vidrio);
	color: #EDEEF6;
	border-color: rgba(167, 139, 250, .55);
	transform: translateY(-2px);
}
.am-icono-btn svg { width: 17px; height: 17px; display: block; }

.am-cta-pastilla {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--am-acento);
	color: #fff;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	white-space: nowrap;
	transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.am-cta-pastilla:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(123, 92, 250, .42);
}

/* El menu desplegado en movil sigue a pantalla completa */
.am-pastilla .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.25rem;
}

@media (max-width: 1100px) {
	.am-pastilla .wp-block-navigation .wp-block-navigation-item__content { padding: 8px 8px; letter-spacing: .1em; }
}
@media (max-width: 900px) {
	.am-cta-pastilla { display: none; }
	.am-pastilla { padding-left: 16px; }
}
@media (max-width: 560px) {
	.am-icono-btn:not(:first-child) { display: none; }
	.am-pastilla { padding: 7px 8px 7px 14px; }
}

/* ============================================================
   HERO EN TARJETA (referencia tipo Nestoria, en oscuro)
   ============================================================ */
.am-hero-envoltura { padding-inline: 0; }
.am-hero-envoltura > .am-hero2 {
	max-width: var(--wp--style--global--wide-size);
	width: 100%;
	margin-inline: auto;
}

.am-hero2 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 34px;
	padding: clamp(28px, 4vw, 56px) clamp(22px, 3.4vw, 52px) clamp(96px, 9vw, 120px);
	background:
		radial-gradient(120% 140% at 12% 0%, #1B1638 0%, transparent 58%),
		radial-gradient(100% 120% at 92% 8%, #10233A 0%, transparent 55%),
		linear-gradient(160deg, #12141F 0%, #0A0B14 62%);
	border: 1px solid var(--am-borde);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

/* Difuminados de color */
.am-hero2__brillo {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .55;
	z-index: -1;
	pointer-events: none;
}
.am-hero2__brillo--a { width: 460px; height: 460px; left: -120px; top: -160px; background: #7B5CFA; }
.am-hero2__brillo--b { width: 380px; height: 380px; right: 4%;    top: -120px; background: #2E7DF6; opacity: .38; }
.am-hero2__brillo--c { width: 420px; height: 420px; right: 18%;   bottom: -220px; background: #10D9A0; opacity: .16; }

.am-hero2__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
}

/* --- Texto --- */
.am-hero2__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px;
	border-radius: 999px;
	border: 1px solid var(--am-borde);
	background: var(--am-vidrio);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #C6CADB;
}
.am-hero2__badge b { width: 7px; height: 7px; border-radius: 50%; background: var(--am-exito); box-shadow: 0 0 0 4px rgba(16,217,160,.16); }

.am-hero2__titulo {
	margin: 20px 0 0;
	font-size: clamp(1.95rem, 3.3vw, 3.05rem);
	line-height: 1.14;
	letter-spacing: -.03em;
	font-weight: 700;
}
.am-sub {
	color: var(--am-luz);
	position: relative;
	white-space: nowrap;
}
.am-sub::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -.02em;
	height: .07em;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--am-acento), var(--am-luz));
}
.am-hero2__bajada {
	margin: 20px 0 0;
	max-width: 46ch;
	font-size: 1.0625rem;
	color: #AFB6CC;
	line-height: 1.6;
}
.am-hero2__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.am-btn-principal, .am-btn-fantasma {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; padding: 0 24px; border-radius: 999px;
	font-size: .9375rem; font-weight: 600; text-decoration: none;
	transition: transform .18s ease, filter .18s ease, background .18s ease, box-shadow .18s ease;
}
.am-btn-principal { background: var(--am-acento); color: #fff; }
.am-btn-principal:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(123,92,250,.45); }
.am-btn-fantasma { border: 1px solid var(--am-borde); color: #EDEEF6; }
.am-btn-fantasma:hover { background: var(--am-vidrio); transform: translateY(-2px); }

.am-hero2__chips { margin-top: 30px; opacity: .85; }

/* --- Visual --- */
.am-hero2__visual { position: relative; display: grid; place-items: center; min-height: 340px; }
.am-hero2__aro {
	position: relative;
	width: clamp(210px, 21.5vw, 302px);
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 10px;
	background: conic-gradient(from 200deg, rgba(123,92,250,.9), rgba(46,125,246,.5), rgba(16,217,160,.45), rgba(123,92,250,.9));
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.am-hero2__circulo {
	width: 100%; height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: #0A0B14;
}
.am-hero2__circulo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.am-hero2__flota {
	position: absolute;
	background: rgba(18, 20, 31, .88);
	backdrop-filter: blur(14px) saturate(150%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	border: 1px solid var(--am-borde);
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.am-hero2__flota--panel { right: -34px; bottom: -46px; width: 236px; padding: 14px 16px; }
.am-hero2__flota--sello {
	left: -26px; top: -6px; padding: 12px 16px; max-width: 182px;
	display: flex; flex-direction: column; gap: 2px;
}
.am-hero2__flota--sello b { font-size: 1.5rem; font-weight: 700; color: var(--am-exito); line-height: 1; }
.am-hero2__flota--sello span { font-size: .75rem; color: #AFB6CC; line-height: 1.35; }

/* --- Barra inferior --- */
.am-hero2__barra {
	position: absolute;
	left: clamp(16px, 3vw, 44px);
	right: clamp(16px, 3vw, 44px);
	bottom: clamp(16px, 2.2vw, 26px);
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.6vw, 26px);
	padding: 12px 12px 12px clamp(16px, 2vw, 26px);
	border-radius: 22px;
	background: rgba(10, 11, 20, .74);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid var(--am-borde);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.am-hero2__kpi { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.am-hero2__kpi + .am-hero2__kpi { border-left: 1px solid var(--am-linea); padding-left: clamp(10px, 1.6vw, 22px); }
.am-hero2__kpi b { font-size: clamp(1.05rem, 1.7vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.am-hero2__kpi span { font-size: .72rem; color: var(--am-apagado); line-height: 1.25; }
.am-hero2__barra-cta {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 9px;
	height: 48px; padding: 0 22px; border-radius: 999px;
	background: var(--am-acento); color: #fff;
	font-size: .9375rem; font-weight: 600; text-decoration: none;
	transition: filter .18s ease, transform .18s ease;
}
.am-hero2__barra-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
.am-hero2__barra-cta svg { width: 18px; height: 18px; }

@media (max-width: 1100px) {
	.am-hero2__flota--sello { display: none; }
	.am-hero2__kpi:nth-child(4) { display: none; }
}
@media (max-width: 900px) {
	.am-hero2__cuerpo { grid-template-columns: 1fr; }
	.am-hero2__visual { min-height: 0; margin-top: 28px; }
	.am-hero2 { padding-bottom: clamp(150px, 26vw, 190px); border-radius: 26px; }
	.am-hero2__barra { flex-wrap: wrap; gap: 12px; }
	.am-hero2__kpi { flex: 1 1 40%; }
	.am-hero2__kpi:nth-child(3) { border-left: 0; padding-left: 0; }
	.am-hero2__barra-cta { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 560px) {
	.am-hero2__flota--panel { position: static; width: 100%; margin-top: 18px; }
	.am-hero2__visual { display: block; }
	.am-hero2__aro { margin: 0 auto; }
	.am-hero2__chips { display: none; }
}

/* ============================================================
   SECCIONES EN TARJETA — mismo lenguaje que el hero
   Cada seccion deja de ser una franja plana de ancho completo y
   pasa a ser una tarjeta redondeada con difuminado propio.
   ============================================================ */
.am-seccion-tarjeta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	margin-block: clamp(16px, 2.4vw, 30px);
	border-radius: 34px;
	border: 1px solid var(--am-borde);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .42);
	padding-inline: clamp(20px, 3.2vw, 52px) !important;
}

/* Difuminado de fondo, distinto por tono para que no se repita */
.am-seccion-tarjeta::before,
.am-seccion-tarjeta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	z-index: -1;
	pointer-events: none;
}
.am-seccion-tarjeta::before { width: 440px; height: 440px; }
.am-seccion-tarjeta::after  { width: 360px; height: 360px; }

.am-tono-a { background: linear-gradient(158deg, #141728 0%, #0A0B14 60%); }
.am-tono-a::before { left: -140px; top: -180px; background: #7B5CFA; opacity: .30; }
.am-tono-a::after  { right: -110px; bottom: -190px; background: #2E7DF6; opacity: .18; }

.am-tono-b { background: linear-gradient(158deg, #10131F 0%, #0A0B14 58%); }
.am-tono-b::before { right: -150px; top: -170px; background: #2E7DF6; opacity: .26; }
.am-tono-b::after  { left: -120px; bottom: -180px; background: #10D9A0; opacity: .12; }

.am-tono-c { background: linear-gradient(158deg, #16121F 0%, #0A0B14 60%); }
.am-tono-c::before { left: 30%; top: -200px; background: #A78BFA; opacity: .22; }
.am-tono-c::after  { right: -130px; bottom: -170px; background: #7B5CFA; opacity: .16; }

.am-tono-cta {
	background: linear-gradient(140deg, #241B4F 0%, #14183A 45%, #0A0B14 100%);
	border-color: rgba(167, 139, 250, .28);
}
.am-tono-cta::before { left: 8%; top: -160px; background: #7B5CFA; opacity: .45; }
.am-tono-cta::after  { right: 4%; bottom: -180px; background: #2E7DF6; opacity: .26; }

/* Las tarjetas interiores se apoyan en vidrio, no en un color plano */
.am-seccion-tarjeta .am-tarjeta {
	background: rgba(255, 255, 255, .035);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-color: var(--am-borde);
	border-radius: 20px;
}
.am-seccion-tarjeta .am-tarjeta:hover { background: rgba(255, 255, 255, .06); }

@media (max-width: 900px) {
	.am-seccion-tarjeta { border-radius: 26px; margin-block: 14px; }
	.am-seccion-tarjeta::before,
	.am-seccion-tarjeta::after { filter: blur(70px); }
}
@media (max-width: 600px) {
	.am-seccion-tarjeta { border-radius: 22px; }
}

/* --- Correcciones sobre las tarjetas de seccion --- */

/* alignfull dejaba las secciones descentradas respecto al hero */
.am-seccion-tarjeta { margin-left: auto !important; margin-right: auto !important; }

/* Dentro de una tarjeta de seccion las metricas van 2x2:
   a 3 columnas se partia la palabra («Contacto s»). */
.am-seccion-tarjeta .am-metricas { grid-template-columns: repeat(2, 1fr); }
.am-metrica__texto span { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* Panel de cifra de cada proyecto, en lugar de una captura inventada */
.am-proyecto__cifra {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-height: 132px;
	padding: 22px 22px 20px;
	border-radius: 16px;
	margin-bottom: 18px;
	background: linear-gradient(140deg, rgba(123, 92, 250, .22) 0%, rgba(46, 125, 246, .12) 55%, rgba(10, 11, 20, .2) 100%);
	border: 1px solid var(--am-borde);
	overflow: hidden;
}
.am-proyecto__cifra::after {
	content: "";
	position: absolute;
	right: -50px; bottom: -60px;
	width: 170px; height: 170px;
	border-radius: 50%;
	background: rgba(167, 139, 250, .18);
	filter: blur(34px);
}
.am-proyecto__cifra .am-proyecto__num {
	position: absolute; top: 14px; right: 16px;
	font-size: .7rem; font-weight: 700; letter-spacing: .12em;
	color: rgba(237, 238, 246, .38);
}
.am-proyecto__cifra b {
	font-size: clamp(1.6rem, 2.3vw, 2.1rem);
	font-weight: 700; letter-spacing: -.03em; line-height: 1;
	color: #fff;
}
.am-proyecto__cifra i {
	font-style: normal; font-size: .8rem; color: #AFB6CC; line-height: 1.3;
}

/* El encabezado de pagina es una tarjeta mas baja y sin tanto peso */
.am-encabezado-tarjeta { border-radius: 28px; }
.am-encabezado-tarjeta::before { opacity: .30 !important; }
.am-encabezado-tarjeta::after  { opacity: .16 !important; }

/* ------------------------------------------------------------
   Ajustes pedidos: menos aire entre cabecera y hero, y panel
   de "Campaña activa" mas pequeno para que no tape la cara.
   ------------------------------------------------------------ */
.am-cab-envoltura { padding-bottom: 4px !important; }
.am-hero-envoltura { padding-top: 8px !important; }

.am-hero2__flota--panel {
	width: 196px;
	padding: 11px 13px;
	right: -30px;
	bottom: -34px;
	border-radius: 15px;
}
.am-hero2__flota--panel .am-panel__cab {
	padding-bottom: 8px;
	margin-bottom: 8px;
	font-size: .5875rem;
	gap: 6px;
}
.am-hero2__flota--panel .am-panel__punto { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(16,217,160,.22); }
.am-hero2__flota--panel .am-panel__datos { gap: 6px; }
.am-hero2__flota--panel .am-panel__datos > div { gap: 8px; }
.am-hero2__flota--panel .am-panel__datos dt { font-size: .6875rem; }
.am-hero2__flota--panel .am-panel__datos dd { font-size: .8125rem; }

/* El sello de +64 % tambien un punto mas pequeno, para que hagan juego */
.am-hero2__flota--sello { padding: 10px 14px; max-width: 168px; }
.am-hero2__flota--sello b { font-size: 1.3rem; }
.am-hero2__flota--sello span { font-size: .7rem; }

/* ------------------------------------------------------------
   La barra inferior del hero pasa a mostrar las plataformas
   en lugar de los KPI (esos ya salen en «Sobre mí»).
   ------------------------------------------------------------ */
.am-hero2__barra-tit {
	flex: 0 0 auto;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--am-apagado);
	white-space: nowrap;
}
.am-hero2__barra-chips {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}
.am-hero2__barra-chips li {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--am-borde);
	background: rgba(255, 255, 255, .03);
	font-size: .8125rem;
	color: #C6CADB;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.am-hero2__barra-tit { flex: 1 1 100%; }
	.am-hero2__barra-chips { flex: 1 1 100%; }
}
@media (max-width: 560px) {
	.am-hero2__barra-chips li { font-size: .75rem; padding: 6px 11px; }
}

/* Mismo aire encima y debajo de la cabecera.
   Se anula tambien el margen que el editor de bloques anade al
   primer bloque de main, que descuadraba la parte de abajo. */
.am-cab-envoltura { padding-top: 16px !important; padding-bottom: 0 !important; }
.am-hero-envoltura { padding-top: 0 !important; margin-top: 0 !important; margin-block-start: 0 !important; }
/* El aire bajo la cabecera lo pone SIEMPRE el <main>, para que la
   portada y las paginas interiores tengan exactamente el mismo.
   Antes lo ponia el hero, y en las interiores la primera seccion
   quedaba pegada al menu. */
.wp-site-blocks > main {
	margin-block-start: 0 !important;
	padding-top: 16px;
}
.wp-site-blocks > main > :first-child { margin-block-start: 0 !important; }

/* ------------------------------------------------------------
   Logos de marca en «Herramientas que domino».
   El recuadro pasa a ser un soporte neutro para el SVG.
   ------------------------------------------------------------ */
.am-hab__logo {
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, .05);
	border-radius: 11px;
}
.am-hab__logo svg {
	width: 21px;
	height: 21px;
	display: block;
}

/* Cinco servicios en una rejilla de dos: el ultimo ocupa el ancho */
.am-rejilla--2 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ============================================================
   LA CUENTA QUE DECIDE (sustituye a «Herramientas que domino»)
   ============================================================ */
.am-cuenta { display: grid; gap: 26px; }

.am-cuenta__formula {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 16px;
	padding: 22px 26px;
	border-radius: 18px;
	border: 1px solid rgba(167, 139, 250, .28);
	background: linear-gradient(135deg, rgba(123, 92, 250, .16), rgba(46, 125, 246, .08));
	text-align: center;
}
.am-cuenta__formula span {
	font-size: 1rem;
	color: #D6DAE8;
}
.am-cuenta__formula b {
	font-size: 1.35rem;
	color: var(--am-luz);
	font-weight: 700;
}
.am-cuenta__formula em {
	font-style: normal;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(123, 92, 250, .3);
}

.am-cuenta__pie {
	margin: 0 auto;
	max-width: 62ch;
	text-align: center;
	font-size: 1rem;
	line-height: 1.6;
	color: #AFB6CC;
}
.am-cuenta__pie b { color: #EDEEF6; }

.am-cuenta__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px;
}
.am-cuenta__caso {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 20px 18px;
	border-radius: 16px;
	border: 1px solid var(--am-borde);
	background: rgba(255, 255, 255, .035);
	text-align: center;
}
.am-cuenta__tasa {
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--am-apagado);
}
.am-cuenta__cifra {
	font-size: clamp(1.35rem, 2.1vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
	white-space: nowrap;
}
.am-cuenta__caso:nth-child(3) .am-cuenta__cifra,
.am-cuenta__caso:nth-child(4) .am-cuenta__cifra { color: var(--am-exito); }
.am-cuenta__nota { font-size: .78rem; color: var(--am-apagado); line-height: 1.35; }

.am-cuenta__remate {
	display: grid;
	gap: 8px;
	padding: 24px 26px;
	border-radius: 18px;
	border: 1px solid rgba(16, 217, 160, .28);
	background: linear-gradient(135deg, rgba(16, 217, 160, .12), rgba(16, 217, 160, .03));
	text-align: center;
}
.am-cuenta__remate b { font-size: 1.15rem; color: #fff; }
.am-cuenta__remate span { font-size: .975rem; color: #C6CADB; line-height: 1.55; }

.am-cuenta__aviso {
	margin: 0 auto;
	max-width: 74ch;
	text-align: center;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--am-apagado);
}

@media (max-width: 700px) {
	.am-cuenta__formula { flex-direction: column; gap: 8px; padding: 18px; }
	.am-cuenta__formula b { font-size: 1.1rem; }
	.am-cuenta__rejilla { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   CASO DESTACADO CON EMBUDO (Dr. Rafael Bárcena)
   ============================================================ */
.am-caso-destacado {
	padding: clamp(22px, 3vw, 34px);
	border-radius: 22px;
	border: 1px solid rgba(167, 139, 250, .26);
	background: linear-gradient(140deg, rgba(123, 92, 250, .13), rgba(46, 125, 246, .06) 55%, rgba(255, 255, 255, .02));
	margin-bottom: 26px;
}
.am-caso-destacado__cab {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 20px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--am-borde);
}
.am-caso-destacado__etq {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--am-exito);
	margin-bottom: 8px;
}
.am-caso-destacado__cab h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0 0 6px; }
.am-caso-destacado__cab p { margin: 0; font-size: .9375rem; color: #AFB6CC; }
.am-caso-destacado__link {
	flex: 0 0 auto;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--am-borde);
	font-size: .8125rem;
	color: #C6CADB;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.am-caso-destacado__link:hover { background: var(--am-vidrio); color: #fff; border-color: rgba(167,139,250,.5); }

.am-embudo {
	/* Rejilla con las flechas intercaladas: garantiza los cuatro
	   pasos en una sola fila, sin que el ultimo se descuelgue. */
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
	align-items: stretch;
	gap: 10px;
}
.am-embudo__paso {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 18px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--am-borde);
}
.am-embudo__paso b {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1;
	color: #fff;
}
.am-embudo__paso:last-of-type b { color: var(--am-exito); }
.am-embudo__que { font-size: .9rem; color: #C6CADB; }
.am-embudo__coste { font-size: .75rem; color: var(--am-apagado); }
.am-embudo__flecha {
	align-self: center;
	color: var(--am-luz);
	font-size: 1.2rem;
	opacity: .55;
}

.am-caso-destacado__pie { margin-top: 22px; }
.am-caso-destacado__pie p { margin: 0 0 8px; font-size: 1rem; color: #D6DAE8; line-height: 1.6; }
.am-caso-destacado__pie b { color: #fff; }
.am-caso-destacado__nota { font-size: .82rem !important; color: var(--am-apagado) !important; line-height: 1.5; }

@media (max-width: 820px) {
	.am-embudo { grid-template-columns: repeat(2, 1fr); }
	.am-embudo__flecha { display: none; }
}
@media (max-width: 460px) {
	.am-embudo { grid-template-columns: 1fr; }
}

/* Pruebas del caso destacado: captura de la cuenta y de la landing */
.am-caso-pruebas {
	display: grid;
	gap: 16px;
	margin-top: 22px;
}
.am-prueba { margin: 0; }
.am-prueba img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
	border: 1px solid var(--am-borde);
	background: #fff;
}
.am-prueba--web img {
	max-height: 300px;
	object-fit: cover;
	object-position: top center;
}
.am-prueba figcaption {
	margin-top: 8px;
	font-size: .78rem;
	color: var(--am-apagado);
	line-height: 1.4;
}
/* La captura de la cuenta va a ancho completo: sus cifras son la
   prueba y a media anchura no se leen. */
.am-caso-pruebas { grid-template-columns: 1fr; }
.am-prueba--web img { max-height: 260px; }

/* Retorno del caso destacado: inversión frente a facturación */
.am-retorno {
	margin-top: 24px;
	padding: 24px;
	border-radius: 18px;
	border: 1px solid rgba(16, 217, 160, .26);
	background: linear-gradient(135deg, rgba(16, 217, 160, .11), rgba(16, 217, 160, .03));
}
.am-retorno__cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}
.am-retorno__cifras > div {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 18px;
	border-radius: 14px;
	background: rgba(10, 11, 20, .38);
	border: 1px solid var(--am-borde);
}
.am-retorno__cifras span {
	font-size: .74rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--am-apagado);
}
.am-retorno__cifras b {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
	white-space: nowrap;
}
.am-retorno__cifras i { font-style: normal; font-size: .75rem; color: var(--am-apagado); }
.am-retorno__x { border-color: rgba(16, 217, 160, .45) !important; }
.am-retorno__x b { color: var(--am-exito); }

.am-retorno__clave {
	margin: 18px 0 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #E6E9F2;
}
.am-retorno__clave b { color: #fff; }
.am-retorno__aviso {
	margin: 12px 0 0;
	font-size: .84rem;
	line-height: 1.55;
	color: var(--am-apagado);
}
.am-retorno__aviso b { color: #C6CADB; }

/* ------------------------------------------------------------
   «Sobre mí»: 30 px justos entre párrafos, y la lista con dos
   guiones en lugar del check verde.
   ------------------------------------------------------------ */
/* Parrafos mas juntos: 20 px, sin margenes heredados de bloques */
.am-sobre-texto p { margin-top: 0; margin-bottom: 20px; }
.am-sobre-texto p:last-of-type { margin-bottom: 0; }
.am-sobre-texto > * { margin-block-start: 0 !important; }

/* La lista vuelve al check verde, pero en dos columnas y mas apretada */
.wp-block-list.am-checks {
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 22px;
	margin-top: 22px;
}
@media (max-width: 640px) {
	.wp-block-list.am-checks { grid-template-columns: 1fr; }
}

/* ============================================================
   CABECERA EN MÓVIL
   Arriba solo marca y menú: el contacto ya lo cubre el botón
   flotante de WhatsApp. El menú se abre a pantalla completa.
   ============================================================ */
@media (max-width: 900px) {
	.am-acciones { display: none !important; }
	.am-pastilla { padding: 8px 10px 8px 18px; }

	/* Botón de hamburguesa: antes quedaba diminuto */
	.am-pastilla .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		display: grid;
		place-items: center;
		border-radius: 50%;
		border: 1px solid var(--am-borde);
		background: rgba(255, 255, 255, .05);
		color: #EDEEF6;
	}
	.am-pastilla .wp-block-navigation__responsive-container-open svg {
		width: 22px;
		height: 22px;
		fill: currentColor;
	}
}

/* Menú desplegado: pantalla completa, enlaces grandes y centrados */
.wp-block-navigation__responsive-container.is-menu-open {
	background: #0A0B14 !important;
	padding: 26px clamp(22px, 6vw, 44px) 44px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 6px;
	width: 100%;
	align-items: stretch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--am-linea);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	font-size: 1.5rem !important;
	font-weight: 600;
	letter-spacing: -.02em;
	text-transform: none !important;
	padding: 18px 4px !important;
	border-radius: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--am-borde);
	background: rgba(255, 255, 255, .05);
	color: #EDEEF6;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; fill: currentColor; }

/* ------------------------------------------------------------
   El menú móvil se quedaba encerrado dentro de la píldora.
   Causa: `backdrop-filter` convierte al elemento en bloque
   contenedor de sus descendientes `position: fixed`, así que el
   overlay se posicionaba respecto a la píldora y no a la pantalla.
   Mientras el menú está abierto se retira ese filtro y se fuerza
   el overlay a ocupar la ventana completa.
   ------------------------------------------------------------ */
html.has-modal-open .am-pastilla,
body.has-modal-open .am-pastilla,
html.has-modal-open .wp-site-blocks > header.wp-block-template-part,
body.has-modal-open .wp-site-blocks > header.wp-block-template-part {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	overflow: visible !important;
	filter: none !important;
	transform: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100dvh !important;
	max-height: 100dvh;
	overflow-y: auto;
	z-index: 100000 !important;
	display: flex !important;
	flex-direction: column;
}

/* Menú abierto: color legible y botón de cierre dentro de la pantalla */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #EDEEF6 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--am-luz) !important;
	background: transparent !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	top: 22px !important;
	right: clamp(20px, 6vw, 44px) !important;
	z-index: 5;
	color: #EDEEF6 !important;
}
/* Sitio para el botón de cierre antes de que empiecen los enlaces */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
}

/* ============================================================
   MÓVIL: MENOS RELLENO LATERAL
   Se sumaban el relleno global del sitio y el de cada tarjeta,
   y el contenido perdía unos 40 px por lado. Aquí se recortan
   los dos para que la lectura ocupe el ancho real del teléfono.
   ============================================================ */
@media (max-width: 700px) {
	:root {
		--wp--style--root--padding-left: 12px;
		--wp--style--root--padding-right: 12px;
	}
	.am-seccion-tarjeta { padding-inline: 18px !important; }
	.am-hero2 { padding-left: 18px; padding-right: 18px; }

	.am-caso-destacado { padding: 18px; }
	.am-retorno { padding: 18px; }
	.am-retorno__cifras > div { padding: 14px 15px; }
	.am-cuenta__caso { padding: 16px 12px; }
	.am-cuenta__formula { padding: 16px; }
	.am-embudo__paso { padding: 15px 14px; }
	.am-tarjeta { padding: 20px !important; }
	.am-caja-form { padding: 20px !important; }
	.am-hero2__flota--panel { padding: 12px 14px; }
}

@media (max-width: 460px) {
	:root {
		--wp--style--root--padding-left: 10px;
		--wp--style--root--padding-right: 10px;
	}
	.am-seccion-tarjeta { padding-inline: 15px !important; }
	.am-hero2 { padding-left: 15px; padding-right: 15px; }
	.am-caso-destacado, .am-retorno { padding: 15px; }
}

/* Margen exterior uniforme en móvil: las tarjetas flotan, no se
   pegan al canto, y por dentro aprovechan el ancho. */
@media (max-width: 700px) {
	/* WordPress define estas variables con mas peso, de ahi el !important */
	:root, body {
		--wp--style--root--padding-left: 12px !important;
		--wp--style--root--padding-right: 12px !important;
	}
	.am-hero-envoltura { padding-inline: 12px !important; }
	/* Las secciones son alignfull: se anula el margen negativo que
	   las saca al borde, para que respeten el mismo canal de 12 px. */
	.am-seccion-tarjeta {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		width: auto !important;
	}
	.am-hero2__barra { left: 12px; right: 12px; }
}