/* =====================================================================
   Nurbrand Theme — main.css
   Índice:
   1. Base y utilidades
   2. Header
   3. Hero
   4. Sobre mi (slider fade)
   5. Osmo — Directional Button Hover (verbatim) + mapeo de tokens
   6. Osmo — Stacking Sticky Cards (verbatim) + overrides Nurbrand
   7. Procés
   8. Formulari + Contact Form 7
   9. Osmo — Line Reveal Testimonials (verbatim) + overrides Nurbrand
   10. Footer
   11. Responsive general
   Los bloques marcados como VERBATIM provienen de recursos de Osmo Supply
   y no deben modificarse (ver CLAUDE.md); las adaptaciones van después.
   ===================================================================== */

/* ============ 1. Base y utilidades ============ */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	-webkit-font-smoothing: antialiased;
}

.nb-label {
	font-size: var(--wp--preset--font-size--label);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--muted-olive);
	line-height: 1.2;
}

.nb-lead {
	color: var(--wp--preset--color--muted-olive);
	max-width: 650px;
}

.nb-intro > * + * {
	margin-top: var(--wp--preset--spacing--l);
}

/* Estado inicial de los reveals: se ocultan solo cuando animations.js se ha
   cargado (clase .nb-anim, añadida por ese archivo). Así, si el JS falla,
   el contenido nunca queda oculto. Los elementos del hero, al estar en el
   viewport inicial, disparan su ScrollTrigger de inmediato al cargar. */
.nb-anim .reveal,
.nb-anim .reveal-text {
	visibility: hidden;
}

.wp-block-image img {
	height: auto;
	max-width: 100%;
}

/* Páginas interiores (legales). Ojo con el nombre de los tokens de espaciado:
   WordPress convierte el slug "3xl" en la variable `--3-xl` (kebab-case), así
   que `--wp--preset--spacing--3xl` no existe. */
.nb-page {
	padding: var(--wp--preset--spacing--3-xl) var(--wp--preset--spacing--l);
}

.nb-page > * + * {
	margin-top: var(--wp--preset--spacing--l);
}

.nb-page .wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--2-xl);
	margin-bottom: var(--wp--preset--spacing--s);
}

.nb-page .wp-block-post-content p {
	line-height: 1.5;
}

/* ============ 2. Header ============ */

/* Header sticky "inteligente": pegado arriba en toda la página; se oculta al
   bajar y reaparece al subir (clase .is-hidden la gestiona header.js) con una
   transición suave. Sticky (no fixed) mantiene el header en el flujo, así que
   no hace falta compensar el desplazamiento del contenido. */
.nb-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.nb-site-header.is-hidden {
	transform: translateY(-100%);
}

/* Compensa la barra de administración de WordPress (usuarios logueados) */
.admin-bar .nb-site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .nb-site-header {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nb-site-header {
		transition: none;
	}
}

.nb-header {
	background: var(--wp--preset--color--yellow-pale);
	align-items: center;
}

.nb-header .nb-logo {
	margin: 0;
}

.nb-header__nav {
	gap: var(--wp--preset--spacing--l);
	align-items: center;
}

.nb-header .wp-block-navigation a {
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: -0.013em;
	color: var(--wp--preset--color--deep-graphite);
}

.nb-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--muted-olive);
}

/* ============ 3. Hero ============ */

/* El padding de las secciones lo ponen los estilos inline de la plantilla
   `front-page` (BD) y, en móvil, las reglas `!important` que inyecta el control
   "Padding mòbil" (`.nb-mp-*`, ver functions.php). Aquí no se declara: cualquier
   regla de hoja de estilos perdería frente a esos dos. */
.nb-hero {
	min-height: calc(100svh - 84px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--l);
}

.nb-hero > * {
	margin: 0;
}

.nb-hero .nb-display {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
	letter-spacing: -0.03em;
	max-width: 1184px;
}

/* ============ 4. Sobre mi ============ */

.nb-sobre-mi {
	position: relative;
	overflow: hidden;
	min-height: min(100vw, 1442px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.nb-sobre-mi__slider {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.nb-sobre-mi__slider .swiper-wrapper {
	height: 100%;
}

.nb-sobre-mi__slider .swiper-slide {
	margin: 0;
	height: 100%;
}

.nb-sobre-mi__slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Encuadre por foto: el bloque es mucho más alto que la ventana, así que a la
   altura a la que se lee el texto sólo se ve la franja superior de la imagen.
   Estos modificadores colocan a la Núria dentro de esa franja (se aplican como
   clase del bloque Imagen desde el editor). */
.nb-sobre-mi__slider .swiper-slide.is--focus-top img {
	object-position: center top;
}

.nb-sobre-mi__slider .swiper-slide.is--focus-center img {
	object-position: center center;
}

.nb-sobre-mi__slider .swiper-slide.is--focus-lower img {
	object-position: center 65%;
}

.nb-sobre-mi__content {
	position: relative;
	z-index: 1;
	max-width: 666px;
}

.nb-sobre-mi__content > * + * {
	margin-top: var(--wp--preset--spacing--l);
}

.nb-sobre-mi__content h2 {
	line-height: 1;
}

.nb-sobre-mi__bio p {
	color: var(--wp--preset--color--muted-olive);
	max-width: 650px;
}

.nb-tag {
	background: var(--wp--preset--color--white-50);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	border-radius: var(--wp--custom--radius--pill);
	line-height: 1;
	margin: 0;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* ============ 5. Osmo — Directional Button Hover ============ */
/* --- VERBATIM Osmo Supply: no modificar --- */

.btn {
  cursor: pointer;
  border-radius: 1em;
  border-radius: calc(var(--btn-height) * .5);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  height: 3em;
  padding-left: 1.25em;
  padding-right: 1.25em;
  text-decoration: none;
  display: flex;
  position: relative;
}

.btn__text {
  color: #efede3;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
  transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn-text-p {
  color: currentColor;
  white-space: nowrap;
  margin-bottom: 0;
  padding-bottom: .05em;
  font-family: PP Neue Montreal, Arial, sans-serif;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.2;
}

.btn__bg {
  background-color: #08181b;
  border-radius: 1.5em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.btn__image {
  border-radius: 50%;
  width: 2.25em;
  height: 2.25em;
  margin-left: -.75em;
  margin-right: .5em;
  position: relative;
  overflow: hidden;
}

.img__founder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.btn__circle-wrap {
  border-radius: 1.5em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.btn__circle {
  pointer-events: none;
  background-color: #d1fd88;
  border-radius: 50%;
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
  background-color: #D1FD88;
}

.before__100 {
  padding-top: 100%;
  display: block;
}

.btn .btn__text {
  transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn:hover .btn__circle {
  transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
}

/* Dark */
.btn[data-theme="dark"] .btn__circle {
  background-color: #D1FD88;
}

.btn[data-theme="dark"]:hover .btn__text {
  color: #031819;
}

/* Light */
.btn[data-theme="light"] .btn__bg {
  background-color: #EFEDE3;
}

.btn[data-theme="light"] .btn__text {
  color: #031819;
}

.btn[data-theme="light"] .btn__circle {
  background-color: #9FCCC8;
}

/* Primary */
.btn[data-theme="primary"] .btn__bg {
  background-color: #D1FD88;
}

.btn[data-theme="primary"] .btn__text {
  color: #031819;
}

.btn[data-theme="primary"] .btn__circle {
  background-color: #b8ec6f;
}

/* --- Fin VERBATIM. Mapeo a tokens Nurbrand (adaptación permitida) --- */

/* Fallback sin JS: el enlace del bloque botón ya se ve como pill */
.wp-block-button.btn-directional .wp-block-button__link {
	background: var(--wp--preset--color--yellow-soft);
	color: var(--wp--preset--color--deep-graphite);
	border-radius: var(--wp--custom--radius--pill);
	padding: 16px 20px;
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: -0.013em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

.wp-block-button.btn-theme-secondary .wp-block-button__link {
	background: var(--wp--preset--color--white);
}

/* Una vez transformado por dom-setup.js, el fondo lo pinta .btn__bg */
.wp-block-button.btn-directional .btn,
.nb-form .btn {
	--btn-height: 51px;
	height: 51px;
	background: transparent;
	border: none;
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn .btn__text {
	align-items: center;
	height: 100%;
}

.btn .btn-text-p {
	font-family: var(--wp--preset--font-family--satoshi);
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: -0.013em;
	font-weight: 400;
	line-height: 1;
	padding-bottom: 0;
	margin: 0;
}

.btn__bg,
.btn__circle-wrap {
	border-radius: var(--wp--custom--radius--pill);
}

.btn[data-theme="primary"] .btn__bg {
	background-color: var(--wp--preset--color--yellow-soft);
}

.btn[data-theme="primary"] .btn__text {
	color: var(--wp--preset--color--deep-graphite);
}

.btn[data-theme="primary"]:hover .btn__text {
	color: var(--wp--preset--color--deep-graphite);
}

.btn[data-theme="primary"] .btn__circle {
	background-color: var(--wp--preset--color--yellow);
}

.btn[data-theme="light"] .btn__bg {
	background-color: var(--wp--preset--color--white);
}

.btn[data-theme="light"] .btn__text {
	color: var(--wp--preset--color--deep-graphite);
}

/* Mismo color de hover que el primario (petición del usuario) */
.btn[data-theme="light"] .btn__circle {
	background-color: var(--wp--preset--color--yellow);
}

/* ============ 6. Osmo — Stacking Sticky Cards (Bounce) ============ */
/* --- VERBATIM Osmo Supply: no modificar --- */

.cards-stack {
  padding-top: 15dvh;
  padding-bottom: 15dvh;
}

.container {
  max-width: 90em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2em;
  padding-right: 2em;
}

.cards-stack__list {
  grid-column-gap: 5em;
  grid-row-gap: 5em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.cards-stack__item {
  flex: none;
  width: 100%;
  max-width: 25em;
  position: sticky;
  top: 5em;
}

.cards-stack__item.is--wide {
  max-width: 60em;
}

.cards-stack-card {
  aspect-ratio: 2 / 3;
  background-color: #fff;
  border-radius: 2em;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  padding: 2.5em;
  display: flex;
}

.cards-stack-card.is--green {
  background-color: #b1ae91;
}

.cards-stack-card.is--dark {
  color: #fff;
  background-color: #201d1d;
}

.cards-stack-card.is--wide {
  aspect-ratio: 5 / 3;
}

.cards-stack-card__number {
  font-size: 6.75em;
  font-weight: 500;
  line-height: .95;
}

.cards-stack-card__h {
  letter-spacing: -.04em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.375em;
  font-weight: 600;
  line-height: .95;
}

.cards-stack-card__h.is--wide {
  font-size: 4.5em;
}

.cards-stack-card__services {
  flex-flow: column;
  justify-content: flex-end;
  min-height: 11em;
  display: flex;
}

.cards-stack-card__services-p {
  letter-spacing: -.01em;
  margin-bottom: 0;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.4;
}

@media screen and (max-width: 991px) {
  .cards-stack-card.is--wide {
    aspect-ratio: 5 / 4;
  }
}

@media screen and (max-width: 767px) {
  .cards-stack__item.is--wide {
    max-width: 25em;
  }

  .cards-stack-card {
    font-size: .8em;
  }

  .cards-stack-card.is--wide {
    aspect-ratio: 2 / 3;
  }

  .cards-stack-card__h.is--wide {
    font-size: 3.375em;
  }
}

/* --- Fin VERBATIM. Overrides Nurbrand (tokens de Figma) --- */

.nb-serveis .nb-intro {
	margin-bottom: 0;
}

.nb-serveis .cards-stack {
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}

/* El recurso Osmo fija `aspect-ratio: 5/3`, que en portátiles (1280x720,
   1366x768) hace la card más alta que el hueco disponible bajo el sticky
   (top: 5em ≈ 95px) y recorta la lista de servicios. Aquí la altura la marca
   el contenido, con un mínimo estético y un techo relativo al viewport. */
.nb-serveis .cards-stack-card {
	background-color: var(--wp--preset--color--muted-olive);
	border: 1px solid var(--wp--preset--color--olive-faint);
	border-radius: var(--wp--custom--radius--l);
	padding: 41px;
	color: var(--wp--preset--color--yellow-pale);
	aspect-ratio: auto;
	min-height: min(480px, calc(100svh - 9rem));
	gap: var(--wp--preset--spacing--l);
}

/* Ventanas bajas (portátiles pequeños, navegador con muchas barras): se
   comprime la card para que siga entrando entera bajo el sticky. */
@media screen and (max-height: 640px) {
	.nb-serveis .cards-stack-card {
		padding: 28px;
		min-height: 0;
		gap: var(--wp--preset--spacing--m);
	}

	.nb-serveis .cards-stack__item {
		top: 3em;
	}
}

/* En móvil la card crece a lo alto (texto en 1-2 líneas por servicio): se
   recorta el sticky y el padding para que quepa entera en pantalla. */
@media screen and (max-width: 767px) {
	.nb-serveis .cards-stack-card {
		padding: 24px;
		gap: var(--wp--preset--spacing--m);
	}

	.nb-serveis .cards-stack__item {
		top: 24px;
	}
}

.nb-serveis .cards-stack-card__number {
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--olive-faint);
	line-height: 1;
	font-weight: 400;
	margin: 0;
}

/* Layout interno de la card: número arriba, bloque de contenido abajo. El
   bloque apila título, descripción y lista con separación explícita (evita el
   solapamiento del título gigante con la descripción, que en el recurso Osmo
   original no existía). */
.nb-serveis .cards-stack-card__end {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
}

.nb-serveis .cards-stack-card__h,
.nb-serveis .cards-stack-card__h.is--l {
	color: var(--wp--preset--color--yellow-pale);
	font-size: clamp(32px, 1.75rem + 2vw, 56px);
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 0.95;
}

.nb-serveis .cards-stack-card__desc {
	color: var(--wp--preset--color--olive-faint);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.33;
	max-width: 504px;
	margin: 0;
}

/* El `min-height: 11em` del recurso Osmo empujaba la card hacia abajo. */
.nb-serveis .cards-stack-card__services {
	min-height: 0;
}

.nb-serveis .cards-stack-card__services-p {
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 400;
	line-height: 1.45;
	margin: 0;
}

/* El cliente puede poner negritas desde el editor: la `p` fija weight 400, así
   que se declara explícitamente (Satoshi 700 ya está cargada). */
.nb-serveis .cards-stack-card__services-p strong,
.nb-serveis .cards-stack-card__desc strong {
	font-weight: 700;
}

/* ============ 7. Procés ============ */

.nb-proces h2 {
	margin-top: var(--wp--preset--spacing--l);
}

.nb-step {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--l);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	position: relative;
	width: fit-content;
}

.nb-step__num {
	font-size: clamp(48px, 3rem + 2vw, 72px);
	color: var(--wp--preset--color--yellow);
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0;
}

.nb-step__text h3 {
	letter-spacing: -0.03em;
	margin: 0;
}

.nb-step__desc {
	color: var(--wp--preset--color--muted-olive);
	margin: 0;
}

/* Indentación escalonada + flechas decorativas (desktop) */
.nb-proces__steps .nb-step:nth-child(2) { margin-left: 128px; }
.nb-proces__steps .nb-step:nth-child(3) { margin-left: 192px; }
.nb-proces__steps .nb-step:nth-child(4) { margin-left: 256px; }
.nb-proces__steps .nb-step:nth-child(5) { margin-left: 320px; }
.nb-proces__steps .nb-step:nth-child(6) { margin-left: 384px; }

.nb-proces__steps .nb-step:not(:first-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -64px;
	width: 24px;
	height: 24px;
	background: url("../img/arrow-b.svg") no-repeat center / 24px 24px;
}

.nb-proces__steps .nb-step:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 24px;
	background-image: url("../img/arrow-a.svg");
	background-size: 24px 24px;
	background-repeat: space no-repeat;
}

.nb-proces__steps .nb-step:nth-child(2)::before { width: 24px; left: -128px; }
.nb-proces__steps .nb-step:nth-child(3)::before { width: 88px; left: -192px; }
.nb-proces__steps .nb-step:nth-child(4)::before { width: 152px; left: -256px; }
.nb-proces__steps .nb-step:nth-child(5)::before { width: 216px; left: -320px; }
.nb-proces__steps .nb-step:nth-child(6)::before { width: 280px; left: -384px; }

/* ============ 8. Formulari + Contact Form 7 ============ */

.nb-form form.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--m);
}

.nb-form .nb-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--m);
}

/* Cada columna (Nom / Email) ocupa el 50%; min-width:0 evita que el input
   desborde la celda del grid. Los <p> que envuelve CF7 no llevan margen. */
.nb-form .nb-form-grid > p {
	min-width: 0;
	margin: 0;
}

.nb-form label {
	font-size: var(--wp--preset--font-size--label);
	line-height: 1;
	display: block;
}

.nb-form .nb-req {
	color: var(--wp--preset--color--error-red);
}

.nb-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 12px;
}

.nb-form input[type="text"],
.nb-form input[type="email"],
.nb-form input[type="tel"],
.nb-form textarea {
	width: 100%;
	/* border-box: el padding y el borde entran dentro del 100%, evitando que
	   el input sea más ancho que su contenedor. */
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	/* Estado natural sin borde visible (Figma). El borde transparente reserva
	   el espacio para que el borde rojo de error no desplace el layout. */
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--input);
	padding: 16px 18px;
	font-family: var(--wp--preset--font-family--satoshi);
	font-size: var(--wp--preset--font-size--item);
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--deep-graphite);
}

.nb-form textarea {
	height: 128px;
	resize: vertical;
}

.nb-form input::placeholder,
.nb-form textarea::placeholder {
	color: var(--wp--preset--color--input-gray);
}

.nb-form input:focus,
.nb-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--olive-faint);
}

.nb-form .wpcf7-radio,
.nb-form .wpcf7-checkbox,
.nb-form .wpcf7-acceptance {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nb-form .wpcf7-radio .wpcf7-list-item,
.nb-form .wpcf7-checkbox .wpcf7-list-item,
.nb-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.nb-form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--wp--preset--font-size--item);
	letter-spacing: -0.02em;
	line-height: 1.2;
	cursor: pointer;
}

.nb-form input[type="radio"],
.nb-form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--wp--preset--color--deep-graphite);
	margin: 0;
	flex: none;
}

.nb-form hr,
.nb-form .nb-divider {
	border: none;
	border-top: 1px solid var(--wp--preset--color--olive-faint);
	margin: 0;
	width: 100%;
}

/* Validación CF7 */
.nb-form .wpcf7-not-valid {
	border-color: var(--wp--preset--color--error-red);
}

.nb-form .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--error-red);
	font-size: var(--wp--preset--font-size--label);
	margin-top: 8px;
}

.nb-form .wpcf7-response-output {
	border: 1px solid var(--wp--preset--color--olive-faint);
	border-radius: var(--wp--custom--radius--input);
	padding: 16px 18px;
	margin: 0;
	font-size: var(--wp--preset--font-size--label);
}

.nb-form .wpcf7-spinner {
	position: absolute;
}

/* Botón de envío (antes y después de la transformación de dom-setup) */
.nb-form input.wpcf7-submit {
	background: var(--wp--preset--color--yellow-soft);
	color: var(--wp--preset--color--deep-graphite);
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	padding: 16px 20px;
	height: auto;
	width: auto;
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: -0.013em;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
}

.nb-form .btn {
	width: fit-content;
}

.nb-form .btn input.wpcf7-submit {
	background: transparent;
	position: relative;
	z-index: 2;
	padding: 0;
	/* La forma pill la aporta .btn__bg; sin radio en el input para no recortar
	   el texto. */
	border-radius: 0;
	color: inherit;
	white-space: nowrap;
	transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

/* ============ 9. Osmo — Line Reveal Testimonials ============ */
/* --- VERBATIM Osmo Supply: no modificar --- */

.testimonial-lines {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.testimonial-lines__controls {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 33.3333%;
  display: flex;
}

.testimonial-lines__main {
  grid-column-gap: 5em;
  grid-row-gap: 5em;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.testimonial-lines__button {
  background-color: #0000;
  border: 1px solid #0003;
  border-radius: .25em;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  display: flex;
}

.testimonial-lines__arrow {
  width: .75em;
}

.testimonial-lines__main-details {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.testimonial-lines__count {
  width: 1ch;
  display: inline-block;
}

.testimonial-lines__p {
  margin-bottom: 0;
  font-size: 1.25em;
  line-height: 1.2;
}

.testimonial-lines__p.is--faded {
  opacity: .5;
}

.testimonial-lines__collection {
  width: 100%;
}

.testimonial-lines__list {
  width: 100%;
  display: grid;
  position: relative;
}

.testimonial-lines__item {
  grid-column-gap: 4em;
  grid-row-gap: 4em;
  opacity: 0;
  visibility: hidden;
  flex-flow: column;
  grid-area: 1 / 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
}

.testimonial-lines__item.is--active {
  opacity: 100;
  visibility: visible;
}

.testimonial-lines__h {
  letter-spacing: -.02em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3em;
  font-weight: 500;
  line-height: 1;
}

.text-line-mask{
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

.testimonial-lines__item-details {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.testimonial-lines__item-visual {
  aspect-ratio: 1;
  border-radius: 100em;
  width: 5em;
  overflow: hidden;
}

.testimonial-lines__item-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .testimonial-lines {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
  }

  .testimonial-lines__controls {
    order: 9999;
    width: 100%;
  }

  .testimonial-lines__main {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
  }

  .testimonial-lines__p {
    font-size: 1em;
  }

  .testimonial-lines__item {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
  }

  .testimonial-lines__h {
    font-size: 2em;
  }

  .testimonial-lines__item-visual {
    width: 3.5em;
  }
}

/* --- Fin VERBATIM. Overrides Nurbrand --- */

.nb-testimonials .testimonial-lines {
	font-size: 16px; /* base em del recurso: 48px cita, 80px avatar, 40px botones */
}

.nb-testimonials .nb-testimonials__title {
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin-bottom: 0;
}

.nb-testimonials .testimonial-lines__h {
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Foto del testimoni: quadrat sense arrodonir i imatge sencera, sense retallar.
   Anul·la el border-radius del bloc VERBATIM; aspect-ratio: 1 i width 5em/3.5em
   s'hereten d'allà, així que la caixa segueix quadrada i responsive. */
.nb-testimonials .testimonial-lines__item-visual {
	margin: 0;
	border-radius: 0;
	flex: 0 0 auto;
}

/* L'<img> no porta la classe .testimonial-lines__item-img, així que la regla
   del VERBATIM no l'afecta. S'estila per descendència. */
.nb-testimonials .testimonial-lines__item-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* El segundo párrafo (cargo) heredaba un margin-top de 1em: demasiado aire
   entre el nombre y el cargo. */
.nb-testimonials .testimonial-lines__profile {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nb-testimonials .testimonial-lines__profile p {
	margin: 0;
}

/* Flechas según Figma: redondas, fondo blanco, sin borde */
.nb-testimonials .testimonial-lines__button {
	cursor: pointer;
	color: var(--wp--preset--color--deep-graphite);
	background-color: var(--wp--preset--color--white);
	border: none;
	border-radius: var(--wp--custom--radius--pill);
}

.nb-testimonials .testimonial-lines__button:hover {
	background-color: var(--wp--preset--color--yellow-soft);
}

/* ============ 10. Footer ============ */

.nb-footer a {
	color: var(--wp--preset--color--yellow-pale);
	text-decoration: none;
}

.nb-footer a:hover {
	color: var(--wp--preset--color--yellow-soft);
}

.nb-footer p {
	margin: 0;
	line-height: 1;
}

.nb-footer .nb-logo {
	margin: 0 0 var(--wp--preset--spacing--m);
}

.nb-footer__cols {
	width: 100%;
}

/* ============ 11. Responsive general ============ */

@media screen and (max-width: 1024px) {
	.nb-proces__steps .nb-step:nth-child(2) { margin-left: 64px; }
	.nb-proces__steps .nb-step:nth-child(3) { margin-left: 96px; }
	.nb-proces__steps .nb-step:nth-child(4) { margin-left: 128px; }
	.nb-proces__steps .nb-step:nth-child(5) { margin-left: 160px; }
	.nb-proces__steps .nb-step:nth-child(6) { margin-left: 192px; }
	.nb-proces__steps .nb-step::before { display: none; }
	.nb-proces__steps .nb-step:not(:first-child)::after { left: -48px; }
}

@media screen and (max-width: 767px) {
	.nb-header {
		padding-left: var(--wp--preset--spacing--m) !important;
		padding-right: var(--wp--preset--spacing--m) !important;
	}

	.nb-header .nb-logo img {
		width: 150px !important;
	}

	/* En móvil se oculta el menú de navegación (incl. el toggle hamburguesa) y
	   solo queda el botón "Parlem". */
	.nb-header__nav .wp-block-navigation {
		display: none;
	}

	.nb-hero {
		min-height: auto;
	}

	.nb-sobre-mi {
		min-height: auto;
	}

	.nb-sobre-mi__content {
		/*background: linear-gradient(rgba(255, 251, 229, 0.82), rgba(255, 251, 229, 0.82));*/
		border-radius: var(--wp--custom--radius--l);
		padding: var(--wp--preset--spacing--m);
	}

	.nb-proces__steps .nb-step {
		margin-left: 0 !important;
		width: 100%;
		flex-wrap: wrap;
	}

	.nb-proces__steps .nb-step::before,
	.nb-proces__steps .nb-step::after {
		display: none;
	}

	.nb-form .nb-form-grid {
		grid-template-columns: 1fr;
	}

	.nb-contacte,
	.nb-testimonials {
		padding-left: var(--wp--preset--spacing--m);
		padding-right: var(--wp--preset--spacing--m);
	}

	.nb-footer {
		padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m) !important;
	}

	.nb-footer__cols {
		flex-direction: column;
		gap: var(--wp--preset--spacing--m);
	}
}