/* =================================================================
   NITANCARA — HF Miniatures
   Sistema de diseño: base oscura «vitrina», acentos verde orco + azul
   ================================================================= */

/* ---------- Tokens ---------- */
:root {
	/* Superficies (base oscura «vitrina», sacada del fondo de la mini) */
	--paper:      #181a1f;   /* fondo base de página */
	--paper-2:    #1e2128;   /* superficie de tarjeta */
	--sand:       #242831;   /* superficie elevada */
	--sand-deep:  #3a3f4a;   /* líneas / marcos / acero de la armadura */

	/* Texto (claro sobre oscuro: hueso / colmillos) */
	--ink:        #ece5d6;
	--ink-2:      #c7bda9;
	--ink-soft:   #9a917f;

	/* Acento principal: verde orco (la piel) */
	--bronze:      #a6b85c;
	--bronze-deep: #8fa247;
	--bronze-light:#c4d083;

	/* Acento de acción: azul (estandarte y capa del jinete) */
	--blue:        #2b8fc4;
	--blue-deep:   #1c6ea3;
	--blue-light:  #7cc4e6;

	/* Apoyos de la mini */
	--rust:    #b4663b;
	--violet:  #7d70b0;
	--gold:    #e6b450;      /* estrellas de valoración */

	/* Oscuros / profundidades */
	--dark:        #101216;
	--dark-2:      #181a1f;
	--dark-3:      #20232a;
	--on-dark:     #ece5d6;
	--on-dark-soft:#9a917f;

	/* Líneas */
	--line:        rgba(236, 226, 209, .12);
	--line-2:      rgba(236, 226, 209, .06);
	--line-dark:   rgba(236, 226, 209, .14);

	/* Medidas */
	--maxw:     1180px;
	--maxw-narrow: 760px;
	--header-h: 100px;
	--radius:   14px;
	--radius-lg:24px;
	--radius-pill: 999px;

	--shadow-sm: 0 4px 14px -8px rgba(0, 0, 0, .55);
	--shadow:    0 16px 40px -18px rgba(0, 0, 0, .6);
	--shadow-lg: 0 40px 80px -28px rgba(0, 0, 0, .7);

	--font-display: "Cinzel", Georgia, "Times New Roman", serif;
	--font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ligero ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	background-color: var(--paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--bronze-deep); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--blue); }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 4px; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: .01em;
	color: var(--ink);
	font-optical-sizing: auto;
}
.h-display { font-size: clamp(2.4rem, 5.4vw, 3.5rem); font-weight: 600; line-height: 1.06; letter-spacing: .005em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.55; color: var(--ink-2); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3rem, 5.5vw, 5rem); position: relative; }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* Separador suave entre secciones consecutivas */
.section + .section::before {
	content: ""; position: absolute; top: 0; left: 50%;
	transform: translateX(-50%);
	width: min(50%, 320px); height: 1px;
	background: linear-gradient(90deg, transparent, var(--sand-deep), transparent);
	opacity: .55;
}

/* Separación entre "Sobre mí" y el portfolio (~100px) */
#sobre-mi  { padding-bottom: clamp(.75rem, 2vw, 1.25rem); }
#portfolio { padding-top:    clamp(.75rem, 2vw, 1.25rem); margin-top: 100px; }

.narrow { max-width: var(--maxw-narrow); margin-inline: auto; }
.center { text-align: center; }

.eyebrow {
	display: inline-flex; align-items: center; gap: .7rem;
	font-family: var(--font-body);
	font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
	color: var(--bronze-deep);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; opacity: .8; border-radius: 2px; }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h2 { margin-top: .25rem; }
.section-head p { margin-top: 1rem; color: var(--ink-2); font-size: clamp(1rem, 1.4vw, 1.1rem); }

/* Centrada: línea a ambos lados del eyebrow */
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::after {
	content: ""; width: 28px; height: 2px; background: currentColor; opacity: .8; border-radius: 2px;
}
.section-head.center p { margin-inline: auto; max-width: 54ch; }

/* Niveles: el título ocupa el ancho completo y va en una sola línea */
.levels .section-head { max-width: none; }
.levels .section-head h2 { white-space: nowrap; font-size: clamp(1.4rem, 3.4vw, 2.5rem); }
@media (max-width: 560px) {
	.levels .section-head h2 { white-space: normal; }
}

/* Opiniones: el título "Lo que dicen mis clientes" va en una sola línea */
#opiniones .section-head { max-width: none; }
#opiniones .section-head h2 { white-space: nowrap; font-size: clamp(1.5rem, 3.6vw, 2.6rem); }
@media (max-width: 560px) {
	#opiniones .section-head h2 { white-space: normal; }
}

/* ---------- Botones ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--font-body); font-weight: 400; font-size: .98rem; letter-spacing: .06em; text-transform: uppercase;
	padding: .9rem 1.5rem; border-radius: 0;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
	will-change: transform; line-height: 1; text-align: center;
}
.btn--sm { padding: .68rem 1.15rem; font-size: .9rem; }
.btn--block { width: 100%; }
.btn--primary {
	color: var(--paper);
	background: linear-gradient(180deg, var(--bronze) 0%, var(--bronze-deep) 100%);
	box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn--primary:hover { color: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow), 0 14px 30px -12px rgba(166, 184, 92, .5), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn--ghost {
	color: var(--ink); background: transparent; border: 1.5px solid var(--line);
}
.btn--ghost:hover { color: var(--ink); border-color: var(--bronze); transform: translateY(-2px); }
.btn__icon { width: 1.1em; height: 1.1em; }

/* ---------- Header ---------- */
.skip-link {
	position: fixed; top: -100px; left: 1rem; z-index: 1000;
	background: var(--ink); color: var(--paper); padding: .75rem 1.1rem; border-radius: 8px;
}
.skip-link:focus { top: 1rem; color: var(--paper); }

.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
	display: flex; align-items: center;
	background: rgba(20, 22, 27, .72);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid transparent;
	transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.site-header.is-scrolled {
	background: rgba(16, 18, 22, .9);
	box-shadow: var(--shadow-sm);
	border-bottom-color: var(--line);
}

/* Marca / logo */
.brand__logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); }
.brand__mark {
	font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em;
	width: 48px; height: 48px; display: grid; place-items: center;
	color: var(--paper); background: linear-gradient(145deg, var(--bronze-light), var(--bronze-deep));
	border-radius: 12px; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.3);
}
.brand__mark--lg { width: 60px; height: 60px; font-size: 1.85rem; }
.brand__mark--green { background: linear-gradient(145deg, #9bb04e, #6f7d33); color: #fff; }
.brand__img { display: block; height: clamp(60px, 8vw, 84px); width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; color: var(--ink); letter-spacing: -.01em; }
.brand__tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.custom-logo { max-height: 52px; width: auto; }

/* Nav */
.nav { margin-left: auto; }
.nav__menu { display: flex; align-items: center; gap: .35rem; }
.nav__menu > li > a {
	display: inline-block; padding: .55rem .9rem; border-radius: 0;
	font-weight: 300; font-size: .98rem; color: var(--ink);
	text-transform: uppercase; letter-spacing: .08em;
	transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__menu > li > a:hover,
.nav__menu > li.current-menu-item > a { color: var(--bronze-deep); background: rgba(166, 184, 92, .12); }
.nav__cta-mobile { display: none; }

.site-header__actions { display: flex; align-items: center; gap: .85rem; }

/* Hamburguesa */
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle__box { position: relative; width: 24px; height: 16px; }
.nav-toggle__inner, .nav-toggle__inner::before, .nav-toggle__inner::after {
	position: absolute; left: 0; width: 24px; height: 2px; border-radius: 2px; background: var(--ink);
	transition: transform .3s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease);
}
.nav-toggle__inner { top: 50%; transform: translateY(-50%); }
.nav-toggle__inner::before { content: ""; top: -7px; }
.nav-toggle__inner::after  { content: ""; top: 7px; }
body.nav-open .nav-toggle__inner { background: transparent; }
body.nav-open .nav-toggle__inner::before { transform: translateY(7px) rotate(45deg); background: var(--ink); }
body.nav-open .nav-toggle__inner::after  { transform: translateY(-7px) rotate(-45deg); background: var(--ink); }

/* ---------- Hero (estudio de pintura) ---------- */
.hero {
	position: relative;
	background: var(--paper);
	padding-top: calc(var(--header-h) + clamp(.5rem, 1.5vw, 1rem));
	padding-bottom: clamp(3rem, 6vw, 5rem);
	overflow: hidden;
	border-bottom: 1px solid var(--line);
}
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(55% 55% at 85% 25%, rgba(166, 184, 92, .12), transparent 60%),
		radial-gradient(40% 50% at 10% 85%, rgba(43, 143, 196, .08), transparent 60%);
}
.hero__inner {
	position: relative; z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

/* Chip de disponibilidad (sustituye al badge flotante que tapaba la imagen) */
.hero__meta-row {
	display: inline-flex; align-items: center; gap: .75rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}
.hero__chip {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .42rem .85rem;
	background: rgba(166, 184, 92, .1);
	border: 1px solid rgba(166, 184, 92, .28);
	border-radius: 0;
	font-size: .78rem; font-weight: 600;
	color: var(--bronze-light);
	letter-spacing: .04em;
}
.hero__chip-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #2e8a4a;
	box-shadow: 0 0 0 3px rgba(46, 138, 74, .18);
	animation: hf-pulse 2.4s ease-in-out infinite;
}
.hero__chip-sub { font-size: .82rem; color: var(--ink-soft); }
@keyframes hf-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(46, 138, 74, .18); }
	50%      { box-shadow: 0 0 0 5px rgba(46, 138, 74, .06); }
}
@media (prefers-reduced-motion: reduce) { .hero__chip-dot { animation: none; } }

.hero__title { margin-block: 0 1.25rem; color: var(--ink); }
.hero__title em { font-style: normal; color: var(--blue); font-weight: 600; }
.hero__lead { color: var(--ink-2); max-width: 58ch; font-size: clamp(1rem, 1.45vw, 1.12rem); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.75rem; }

/* Stats con dt/dd (más temático: "ficha del estudio") */
.hero__stats {
	margin: 2.25rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 2rem;
}
.hero__stat dt {
	font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--bronze-deep); font-weight: 700;
	margin-bottom: .35rem;
}
.hero__stat dd {
	margin: 0;
	font-family: var(--font-display); font-size: 1rem; color: var(--ink);
	line-height: 1.35;
}

/* Imagen con marco tipo "ficha de taller": 4 esquinas en oro viejo, sin solapes */
.hero__figure { position: relative; justify-self: center; margin: 0; max-width: 520px; width: 100%; }
.hero__frame {
	position: relative;
	padding: 14px;
	background: linear-gradient(180deg, #23262d 0%, #15171b 100%);
	border: 1px solid var(--sand-deep);
	border-radius: 4px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .05) inset,
		0 40px 70px -28px rgba(0, 0, 0, .7);
}
.hero__frame img {
	width: 100%; height: auto;
	display: block;
	border-radius: 2px;
	background: #14110d;
}
.hero__corner {
	position: absolute;
	width: 18px; height: 18px;
	border: 2px solid var(--bronze);
	pointer-events: none;
}
.hero__corner--tl { top: -4px;    left: -4px;    border-right: 0; border-bottom: 0; }
.hero__corner--tr { top: -4px;    right: -4px;   border-left: 0;  border-bottom: 0; }
.hero__corner--bl { bottom: -4px; left: -4px;    border-right: 0; border-top: 0; }
.hero__corner--br { bottom: -4px; right: -4px;   border-left: 0;  border-top: 0; }

/* Lupa de zoom sobre la foto del hero (solo ratón fino; ver main.js) */
.hero__frame img { cursor: crosshair; }
.hero__lens {
	position: absolute;
	width: 150px; height: 150px;
	border-radius: 50%;
	pointer-events: none;
	background-color: var(--dark);
	background-repeat: no-repeat;
	border: 2px solid var(--ink);
	box-shadow:
		0 0 0 1.5px var(--bronze),
		0 12px 28px -6px rgba(0, 0, 0, .7);
	opacity: 0;
	transition: opacity .15s var(--ease);
	z-index: 6;
}
.hero__lens.is-active { opacity: 1; }

/* ---------- Tags de confianza (sobre crema) ---------- */
.trust { background: transparent; color: var(--ink-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 2rem; padding-block: 1.25rem; }
.trust__item { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.trust__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--bronze); opacity: .55; }

/* ---------- Intro / sobre mí ---------- */
.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.intro__text h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.12; }
.intro__text h2 em { font-style: normal; color: var(--blue); font-weight: 600; }
.intro__text p + p { margin-top: 1.1rem; }
.intro__list { margin-top: 1.75rem; display: grid; gap: .85rem; }
.intro__list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--ink-2); }
.intro__list svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--bronze); margin-top: .15rem; }
.intro__media { position: relative; }
.intro__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; object-fit: cover; aspect-ratio: 4/5; }
.intro__media-frame { position: absolute; inset: -14px -14px 14px 14px; border: 1.5px solid var(--sand-deep); border-radius: var(--radius-lg); z-index: -1; }

/* ---------- Portfolio (sobre crema) ---------- */
.showcase { background: transparent; color: var(--ink); }
.showcase__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

.portfolio-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 1.2vw, 1rem);
	grid-auto-flow: dense;
}
.pf {
	position: relative; overflow: hidden; border-radius: var(--radius);
	background: var(--paper-2); aspect-ratio: 1; border: 1px solid var(--line);
}
.pf img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pf:hover img { transform: scale(1.06); }
.pf--tall { grid-row: span 2; aspect-ratio: 1/2; }
.pf--wide { grid-column: span 2; aspect-ratio: 2/1; }
.pf--big  { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
.pf__overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
	padding: 1rem; gap: .25rem; opacity: 0; transition: opacity .35s var(--ease);
	background: linear-gradient(0deg, rgba(10, 8, 5, .82) 0%, rgba(10, 8, 5, .15) 55%, transparent 100%);
}
.pf:hover .pf__overlay, .pf:focus-within .pf__overlay { opacity: 1; }
.pf__title { font-family: var(--font-display); color: #fff; font-size: 1.05rem; }
.pf__tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--bronze-light); letter-spacing: .08em; text-transform: uppercase; }
.pf__tag svg { width: 15px; height: 15px; flex: 0 0 auto; }
.showcase__cta { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* Carrusel del portfolio (plugin nitancara-portfolio) embebido en la sección oscura */
.portfolio-carousel { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.portfolio-carousel .np-carousel__figure { background: var(--dark-2); border: 1px solid var(--line-dark); }

.portfolio-empty {
	background: rgba(166, 184, 92, .08);
	border: 1px dashed rgba(166, 184, 92, .32);
	color: var(--on-dark-soft);
	padding: 1.5rem 1.75rem;
	border-radius: var(--radius);
	text-align: center;
}
.portfolio-empty a { color: var(--bronze-light); text-decoration: underline; text-underline-offset: 3px; }
.portfolio-empty a:hover { color: #fff; }

/* ---------- Niveles de pintura ---------- */
.levels { background: transparent; }
.levels-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.1rem, 1.8vw, 1.6rem);
	align-items: stretch;
	padding-top: 1.5rem; /* deja sitio al pill "Más elegido" sin recortes */
}

.level {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 2rem 1.75rem 1.85rem;
	box-shadow: 0 1px 2px rgba(28, 20, 12, .03);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
	overflow: visible;
}
.level:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
	border-color: var(--sand-deep);
}
.level.is-featured {
	background: #20232b;
	border-color: var(--blue);
	box-shadow: 0 22px 50px -22px rgba(43, 143, 196, .4);
	transform: translateY(-10px);
}
.level.is-featured:hover { transform: translateY(-14px); }

/* Pill "Más elegido" */
.level__pill {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
	color: #fff;
	padding: .42rem 1.1rem;
	border-radius: 0;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 8px 18px -8px rgba(43, 143, 196, .55);
}

/* Cabecera de cada card */
.level__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--line-2);
}
.level__num {
	font-family: var(--font-display);
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1;
	color: var(--bronze);
	opacity: .35;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
}
.level.is-featured .level__num { opacity: .55; }
.level__title { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.level__name {
	font-family: var(--font-display);
	font-size: 1.5rem;
	margin: 0;
	line-height: 1.1;
}
.level__for {
	font-size: .8rem;
	color: var(--ink-soft);
	letter-spacing: .04em;
}

/* Descripción */
.level__desc {
	margin-top: 1.4rem;
	color: var(--ink-2);
	font-size: .96rem;
	line-height: 1.55;
}

/* Lista de features */
.level__features {
	margin: 1.4rem 0 0;
	padding: 1.4rem 0 0;
	border-top: 1px solid var(--line-2);
	display: grid;
	gap: .85rem;
	list-style: none;
}
.level__features li {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-size: .94rem;
	color: var(--ink-2);
	line-height: 1.4;
}
.level__tick {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(166, 184, 92, .14);
	display: grid;
	place-items: center;
	margin-top: .1rem;
}
.level.is-featured .level__tick { background: rgba(166, 184, 92, .24); }
.level__tick svg {
	width: 12px;
	height: 12px;
	color: var(--bronze-deep);
	stroke-width: 2.6;
}

/* CTA */
.level__cta { margin-top: auto; padding-top: 1.6rem; }

.levels__note {
	text-align: center;
	margin: 2.5rem auto 0;
	color: var(--ink-soft);
	font-size: .92rem;
	max-width: 56ch;
}

@media (max-width: 1024px) {
	.levels-grid { grid-template-columns: repeat(2, 1fr); }
	.level.is-featured { transform: none; }
	.level.is-featured:hover { transform: translateY(-6px); }
}
@media (max-width: 560px) {
	.levels-grid { grid-template-columns: 1fr; padding-top: 1rem; }
	.level { padding: 1.75rem 1.4rem 1.5rem; }
}

/* ---------- Testimonios ---------- */
.testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.testi {
	background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-sm);
}
.testi__stars { display: flex; gap: .15rem; color: var(--gold); }
.testi__stars svg { width: 18px; height: 18px; }
.testi__quote { font-family: var(--font-body); font-style: italic; font-size: 1.1rem; line-height: 1.55; color: var(--ink); font-weight: 500; }
.testi__foot { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.testi__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--sand-deep); color: var(--bronze-deep); display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); }
.testi__who { line-height: 1.2; }
.testi__name { font-weight: 600; color: var(--ink); }
.testi__src { font-size: .8rem; color: var(--ink-soft); }
.testi__badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--ink-soft); }

/* ---------- Contacto (sobre crema) ---------- */
.contact { background: transparent; }

.contact__grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.contact__channels {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	order: 1; /* formulario a la izquierda, redes a la derecha */
}
.contact__channels-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .85rem;
}
.contact__channels-or {
	font-family: var(--font-display);
	font-size: 1.2rem;
	color: var(--ink);
	letter-spacing: -.01em;
	margin: 1.4rem 0 .5rem;
}
.contact__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .85rem 1rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper-2);
	color: var(--ink);
	font-weight: 600;
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.contact__wa:hover { border-color: var(--bronze); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: var(--ink); }
.contact__wa svg { width: 22px; height: 22px; flex: 0 0 auto; color: #25d366; }
.contact__sub {
	font-family: var(--font-display);
	font-size: 1.2rem;
	color: var(--ink);
	margin-bottom: .35rem;
	letter-spacing: -.01em;
}
.contact__channel {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
	aspect-ratio: 1 / 1;
	text-align: center;
	padding: 1.1rem 1rem;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 14px;
	color: var(--ink);
	transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.contact__channel:hover {
	border-color: var(--bronze);
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
	color: var(--ink);
}
.contact__channel-icon {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	background: linear-gradient(145deg, var(--bronze-light), var(--bronze));
	color: #fff;
	border-radius: 12px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.contact__channel-icon svg { width: 22px; height: 22px; }
.contact__channel-body { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; }
.contact__channel-label {
	font-size: .72rem;
	color: var(--ink-soft);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
}
.contact__channel-value {
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}
.contact__channel-arrow {
	font-size: 1.25rem;
	color: var(--bronze-deep);
	opacity: .55;
	transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.contact__channel:hover .contact__channel-arrow { opacity: 1; transform: translateX(3px); }

.contact__channels-note {
	margin-top: .75rem;
	font-size: .88rem;
	color: var(--ink-soft);
	padding: 0 .25rem;
}

/* ---------- Footer (oscuro) ---------- */
.site-footer {
	background: var(--dark);
	color: var(--on-dark-soft);
	padding-top: clamp(1.25rem, 2.5vw, 2rem);
	position: relative;
	overflow: hidden;
}
.site-footer::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(45% 60% at 85% 15%, rgba(166, 184, 92, .1), transparent 60%),
		radial-gradient(40% 50% at 10% 90%, rgba(43, 143, 196, .06), transparent 60%);
}
.site-footer > .container { position: relative; z-index: 1; }

.site-footer__main {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-bottom: clamp(1rem, 2vw, 1.5rem);
	border-bottom: 1px solid rgba(236, 226, 209, .12);
	align-items: start;
}

.site-footer__brand { max-width: none; }
.site-footer__logo { display: inline-block; margin-bottom: .9rem; }
.site-footer__logo img { display: block; height: 46px; width: auto; }
.site-footer__brand .brand__mark { margin: 0; }
.site-footer__logo-text {
	font-family: var(--font-display);
	font-size: 1.55rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: .01em;
	line-height: 1;
}
.site-footer__about {
	color: var(--on-dark-soft);
	font-size: .92rem;
	line-height: 1.6;
	margin: 0;
}

/* Columnas de footer: resumen de la web + redes */
.site-footer__col-title {
	font-family: var(--font-display);
	font-size: .82rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1rem;
}
.site-footer__nav { display: flex; flex-direction: column; gap: .55rem; }
.site-footer__nav a {
	color: var(--on-dark-soft);
	font-size: .95rem;
	width: fit-content;
	transition: color .2s var(--ease), transform .2s var(--ease);
}
.site-footer__nav a:hover { color: var(--bronze-light); transform: translateX(3px); }

.site-footer__social { display: flex; flex-direction: column; gap: .55rem; }
.site-footer__sbtn {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem .8rem;
	border: 1px solid rgba(236, 226, 209, .14);
	border-radius: 12px;
	background: rgba(236, 226, 209, .03);
	color: var(--on-dark);
	font-size: .9rem;
	font-weight: 600;
	transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.site-footer__sbtn:hover {
	border-color: var(--bronze);
	background: rgba(236, 226, 209, .07);
	color: var(--on-dark);
	transform: translateY(-2px);
}
.site-footer__sbtn-icon { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; color: var(--bronze-light); }
.site-footer__sbtn-icon svg { width: 20px; height: 20px; }

.site-footer__cta { padding-top: .25rem; }
.site-footer__title {
	font-family: var(--font-display);
	color: #fff;
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	font-weight: 600;
	margin: 0 0 .5rem;
	letter-spacing: -.01em;
	line-height: 1.2;
}
.site-footer__sub {
	color: var(--on-dark-soft);
	font-size: .95rem;
	margin: 0 0 1.5rem;
}
.site-footer__buttons {
	display: grid;
	gap: .75rem;
}
.site-footer__btn {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-radius: 14px;
	border: 1px solid rgba(236, 226, 209, .14);
	background: rgba(255, 253, 248, .03);
	color: #fff;
	transition: transform .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.site-footer__btn:hover {
	transform: translateY(-2px);
	border-color: var(--bronze-light);
	background: rgba(200, 159, 87, .1);
	color: #fff;
}
.site-footer__btn-icon {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 12px;
	background: rgba(255, 253, 248, .08);
	color: var(--bronze-light);
}
.site-footer__btn-icon svg { width: 22px; height: 22px; }
.site-footer__btn--instagram .site-footer__btn-icon {
	background: linear-gradient(135deg, #fbb645 0%, #d6336c 50%, #5e2cb0 100%);
	color: #fff;
}
.site-footer__btn--wallapop .site-footer__btn-icon {
	background: linear-gradient(145deg, #4cb380, #2a7d59);
	color: #fff;
}
.site-footer__btn-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.site-footer__btn-label {
	font-weight: 600;
	font-size: 1.02rem;
	color: #fff;
}
.site-footer__btn-meta {
	font-size: .82rem;
	color: var(--on-dark-soft);
}

.site-footer__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem 1.5rem;
	padding-block: 1rem;
}
.site-footer__copy {
	margin: 0;
	font-size: .88rem;
	color: var(--on-dark-soft);
	justify-self: start;
}
.site-footer__by {
	margin: 0;
	justify-self: end;
	text-align: right;
	font-size: .85rem;
	color: var(--on-dark-soft);
}
.site-footer__by a {
	color: var(--on-dark);
	text-decoration: none;
	font-weight: 600;
	transition: color .2s var(--ease);
}
.site-footer__by a:hover { color: var(--bronze-light); }

.site-footer__legal {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	justify-content: center;
	justify-self: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer__legal li { list-style: none; }
.site-footer__legal a {
	color: var(--on-dark-soft);
	font-size: .85rem;
	transition: color .2s var(--ease);
}
.site-footer__legal a:hover { color: var(--bronze-light); }

@media (max-width: 900px) {
	.site-footer__main { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
	.site-footer__bar { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .85rem; }
	.site-footer__copy, .site-footer__by, .site-footer__legal { justify-self: center; text-align: center; }
}
@media (max-width: 520px) {
	.site-footer__main { grid-template-columns: 1fr; }
	.site-footer__brand { grid-column: auto; }
}

/* ---------- Reveal / animaciones ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.pf img, .level, .btn { transition: none; }
}

/* ---------- Accesibilidad ---------- */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	:root { --header-h: 88px; }
	.site-header__cta { display: none; }
	.nav-toggle { display: inline-flex; }

	.nav {
		position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99;
		background: var(--paper); border-bottom: 1px solid var(--line);
		padding: 1.25rem clamp(1.1rem, 4vw, 2.5rem) 1.75rem;
		display: grid; gap: .35rem; box-shadow: var(--shadow);
		transform: translateY(-130%); transition: transform .35s var(--ease); visibility: hidden;
	}
	body.nav-open .nav { transform: none; visibility: visible; }
	.nav__menu { flex-direction: column; align-items: stretch; gap: .15rem; }
	.nav__menu > li > a { display: block; padding: .85rem 1rem; font-size: 1.1rem; color: var(--ink); }
	.nav__cta-mobile { display: inline-flex; margin-top: .85rem; }

	.hero__inner { grid-template-columns: 1fr; min-height: 0; text-align: center; }
	.hero__meta-row { justify-content: center; }
	.hero__lead { margin-inline: auto; }
	.hero__actions { justify-content: center; }
	.hero__stats { grid-template-columns: 1fr; gap: 1rem; max-width: 360px; margin-inline: auto; }
	.hero__stat dt, .hero__stat dd { text-align: center; }
	.hero__figure { order: -1; margin-bottom: 1.5rem; max-width: 360px; }

	.intro__grid { grid-template-columns: 1fr; }
	.intro__media { order: -1; max-width: 440px; margin-inline: auto; }
	.contact__grid { grid-template-columns: 1fr; }
	.testi__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	body { font-size: 1rem; }
	.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
	.pf--big, .pf--wide { grid-column: span 2; }
	.pf--big { aspect-ratio: 2/1; grid-row: auto; }
	.pf--tall { grid-row: auto; aspect-ratio: 1; }
	.brand__tag { display: none; }
}

/* ---------- Páginas internas / contenido ---------- */
.page-wrap { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(4rem, 8vw, 7rem); }
/* Página Portfolio: cabecera pegada al menú fijo (se pidió −250px; el hueco real
   es ~150px contando el menú, así que lo dejamos al mínimo seguro) y título
   "Trabajos recientes" del mismo tamaño que el <h2> de la landing. */
.page-wrap--portfolio { padding-top: max( calc( var(--header-h) + .75rem ), calc( var(--header-h) + clamp(2.5rem, 6vw, 5rem) - 250px ) ); }
.page-wrap--portfolio .section-head .entry__title { font-size: clamp(1.9rem, 4vw, 3rem); margin-top: .25rem; }

/* ---------- Página Niveles (info ampliada) ---------- */
/* Cabecera: título "Elige cuánto detalle quieres" en una sola línea */
.page-wrap--niveles .section-head { max-width: none; }
.page-wrap--niveles .section-head .entry__title { white-space: nowrap; font-size: clamp(1.6rem, 3.6vw, 2.7rem); }
@media (max-width: 560px) {
	.page-wrap--niveles .section-head .entry__title { white-space: normal; }
}
.lvlpage { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4.5rem); margin-top: clamp(1rem, 2vw, 2rem); }
.lvlpage__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
.lvlpage__row:nth-child(even) .lvlpage__media { order: 2; } /* imagen a la derecha en filas pares */

.lvlpage__media { margin: 0; }
.lvlpage__ph {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	text-align: center;
	color: var(--on-dark, #f3ece0);
	background:
		radial-gradient(120% 120% at 30% 20%, rgba(43, 143, 196, .18), transparent 60%),
		linear-gradient(160deg, #20232b, #14110d);
	border: 1px solid rgba(236, 226, 209, .12);
}
.lvlpage__ph-num { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; opacity: .92; }
.lvlpage__ph-name { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; }
.lvlpage__ph-hint { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; opacity: .45; margin-top: .35rem; }

.lvlpage__body { display: flex; flex-direction: column; align-items: flex-start; }
.lvlpage__num { font-family: var(--font-display); font-size: 1rem; letter-spacing: .1em; color: var(--bronze-deep); opacity: .85; margin-bottom: .3rem; }
.lvlpage__name { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; }
.lvlpage__for { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-top: .35rem; }
.lvlpage__desc { color: var(--ink-2); margin: 1rem 0 1.25rem; max-width: 52ch; }
.lvlpage__features { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lvlpage__features li { display: flex; align-items: flex-start; gap: .6rem; color: var(--ink); }
.lvlpage__tick { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(166, 184, 92, .18); color: #6f7d33; }
.lvlpage__tick svg { width: 14px; height: 14px; }

.lvlpage__cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lvlpage__cta p { color: var(--ink-soft); max-width: 56ch; margin: 0; }

@media (max-width: 760px) {
	.lvlpage__row { grid-template-columns: 1fr; gap: 1.25rem; }
	.lvlpage__row:nth-child(even) .lvlpage__media { order: 0; } /* imagen arriba en móvil */
}
.entry__head { margin-bottom: 2rem; }
.entry__meta { color: var(--ink-soft); font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .5rem; }
.entry__title { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.entry__media { margin: 1.5rem 0 2rem; }
.entry__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }

.prose { font-size: 1.08rem; color: var(--ink-2); }
.prose > * + * { margin-top: 1.2rem; }
.prose h2, .prose h3 { color: var(--ink); margin-top: 2.2rem; }
.prose a { color: var(--bronze-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--blue); }
.prose ul, .prose ol { padding-left: 1.4rem; display: grid; gap: .5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose img { border-radius: var(--radius); }
.prose blockquote { border-left: 3px solid var(--bronze); padding-left: 1.2rem; font-family: var(--font-body); font-size: 1.2rem; color: var(--ink); font-style: italic; }
.prose code { background: var(--paper-2); padding: .15em .4em; border-radius: 5px; font-size: .9em; }

.post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 3vw, 2rem); }
.post-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__media img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.post-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-card__title { font-size: 1.3rem; }
.post-card__title a { color: var(--ink); }
.post-card__title a:hover { color: var(--bronze-deep); }
.post-card__meta { color: var(--ink-soft); font-size: .85rem; }
.post-card__excerpt { color: var(--ink-2); font-size: .98rem; }
.post-card__body .btn { margin-top: auto; align-self: flex-start; }

.pagination { margin-top: 3rem; display: flex; justify-content: center; }
.pagination .page-numbers { display: inline-flex; gap: .35rem; flex-wrap: wrap; padding: 0; list-style: none; }
.pagination .page-numbers li { list-style: none; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .6rem; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); }
.pagination .current { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.pagination a:hover { border-color: var(--bronze); color: var(--bronze-deep); }

.entry__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.entry__nav a { font-weight: 500; }

@media (max-width: 700px) {
	.post-list { grid-template-columns: 1fr; }
}

/* ---------- Instagram embeds (portfolio) ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: start; }
.ig-grid .instagram-media { min-width: 0 !important; width: 100% !important; margin: 0 !important; }
.ig-grid > blockquote.instagram-media:not([data-instgrm-payload-id]) {
	/* Estado previo a que cargue embed.js: tarjeta de respaldo. */
	background: var(--paper-2); border-radius: var(--radius); padding: 2.5rem 1.25rem; text-align: center;
	border: 1px solid var(--line-dark);
}
@media (max-width: 980px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ig-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ---------- Sello Wallapop ---------- */
.wallapop-badge {
	display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.2rem;
	padding: .55rem 1.1rem; border-radius: 0;
	background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.center .wallapop-badge { margin-inline: auto; }
.wallapop-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--bronze); color: var(--ink); }
.wallapop-badge__stars { display: inline-flex; gap: .08rem; color: var(--gold); }
.wallapop-badge__stars svg { width: 17px; height: 17px; }
.wallapop-badge__text { font-size: .95rem; }
.wallapop-badge__text strong { font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); }