/**
 * Riks — CSS base.
 *
 * Tokens de :root sacados directamente del archivo Figma ZKUmEehdo8k2L5K28KWIPQ
 * (nodo Home 1:2, versión desktop ES) el 2026-07-06. Lo que SÍ está confirmado:
 * colores (#3c444f, #d9a9cd, #abc4e8, #d9d9d9, #1e1e1e), las dos familias
 * tipográficas (Lexend para títulos/display, Montserrat para botones/UI) y la
 * estructura de colores del hero (dos líneas del tagline en blanco / celeste).
 *
 * Lo que sigue siendo aproximado: spacing y breakpoints mobile (el Figma solo
 * tiene el desktop ES armado), y el resto de las páginas (Trabajo, Servicios,
 * Sobre Mí, Contacto, single-proyecto) todavía no se muestrearon nodo por nodo
 * — se heredan estos mismos tokens por consistencia, pero conviene repasarlas
 * contra Figma antes de publicar.
 */

:root {
	--riks-color-bg: #ffffff;
	--riks-color-text: #1e1e1e;
	--riks-color-text-muted: #666666;
	--riks-color-dark: #3c444f;      /* header, footer y barra de logos */
	--riks-color-surface: #d9d9d9;   /* fondo de secciones (pilares/servicios) */
	--riks-color-accent: #d9a9cd;    /* botones primarios (mauve/rosa) */
	--riks-color-highlight: #abc4e8; /* acento celeste, 2da línea del tagline hero */
	--riks-color-border: #e2e2e2;
	--riks-color-whatsapp: #25d366;

	--riks-font-display: 'Lexend', sans-serif; /* títulos, tagline hero */
	--riks-font-base: 'Montserrat', sans-serif; /* botones, UI, cuerpo de texto */
	--riks-font-weight-black: 900;

	--riks-container-max: 1240px;
	--riks-container-padding: 24px;

	--riks-header-height: 96px; /* aproximado — Figma solo tiene desktop */
	--riks-radius: 8px;

	/* Grosor único del contorno de todos los textos "outline" del sitio.
	   Medido pixel a pixel sobre los renders del Figma (títulos SERVICIOS
	   de 108px y CÓMO TRABAJO de 78px): en los dos da 2px, o sea que es
	   una constante, no un valor proporcional a la tipografía. */
	--riks-stroke-width: calc(2px * var(--riks-fs));
	/* Línea divisoria estándar (debajo de los títulos grandes de página,
	   dentro de las cards de pilar, en los CTA finales). Es MAUVE, no
	   oscura: muestreado sobre los renders del Figma de Trabajo y
	   Servicios, las dos líneas dan #d9a9cd. */
	--riks-divider-color: var(--riks-color-accent);
	--riks-divider-width: calc(2px * var(--riks-fs));

	/* ---- Escala Figma → sitio ----------------------------------------
	   El Figma está armado sobre un canvas de 1728px con márgenes de 143px
	   por lado: el área de contenido real mide 1442px. Acá el .container
	   mide 1240px con 24px de padding por lado: 1192px útiles.
	   1192 / 1442 = 0.8266.
	   REGLA: cualquier medida sacada del Figma (font-size, ancho, gap) se
	   escribe como calc(<valor del Figma>px * var(--riks-fs)) para que
	   quede trazable al nodo original y no se vuelva a "inventar" un
	   número. NO usar 0.717 (esa compara contra el canvas completo de
	   1728px, no contra el área de contenido: deja todo chico). */
	--riks-fs: 0.8266;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--riks-font-base);
	color: var(--riks-color-text);
	background: var(--riks-color-bg);
	line-height: 1.5;
}

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

a { color: inherit; text-decoration: none; }

.container {
	max-width: var(--riks-container-max);
	margin-inline: auto;
	padding-inline: var(--riks-container-padding);
}

/* Títulos grandes (hero, títulos de página): Lexend Black/ExtraBold, sin
   contorno — el Figma no usa text-stroke, usa Lexend sólido + dos colores
   por línea en el hero (ver .riks-hero__tagline). */
.riks-editorial-title {
	font-family: var(--riks-font-display);
	font-weight: var(--riks-font-weight-black);
}

.riks-page-title {
	font-family: var(--riks-font-display);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: var(--riks-font-weight-black);
	margin: 0 0 8px;
	text-transform: uppercase;
}

.riks-page-subtitle {
	font-size: 1.1rem;
	color: var(--riks-color-text-muted);
	max-width: 640px;
}

/* ============ INTRO DE /TRABAJO ============ */
/* Ajustado contra Figma (nodo 3:166): el título "TRABAJO" es un outline
   enorme (mismo tratamiento que los títulos de sección del Home, pero más
   grande — 108px en Figma), y la bajada es grande (48px) con la primera
   frase en mauve. FILTRAR queda alineado a la derecha, en la misma fila que
   la bajada, sobre una línea divisoria. */
/* padding-top agregado (feedback 2026-08): el título quedaba pegado al
   header — en Figma hay ~106px de aire entre el header y "TRABAJO". Este
   padding es el criterio único para AMBAS páginas (Trabajo y Servicios) —
   no pisar con reglas por-página. */
/* Figma: el header termina en y=204 y el glifo del título arranca en
   y≈336 (medido sobre el render, no sobre la caja de texto — la caja
   tiene leading 40px y los glifos de 108px se desbordan). → 132px. */
.riks-trabajo__intro { padding-top: calc(132px * var(--riks-fs)); }
.riks-trabajo__title {
	/* Figma: el glifo termina en y≈418 y la línea divisoria está en
	   y=460 → 42px de aire visual. Se le restan ~19px de descendente que
	   line-height:1 deja dentro de la caja (el título va en mayúsculas,
	   así que ese espacio queda vacío). */
	margin: 0 0 calc(42px * var(--riks-fs) - 19px);
	font-family: var(--riks-font-base); /* Montserrat Black — confirmado en el nodo 5:51 */
	font-weight: 900;
	/* Figma: 108px. Antes tenía 6.5rem=104px, un número inventado que
	   por casualidad quedaba cerca pero no salía de ninguna medida. */
	font-size: clamp(3rem, 8vw, calc(108px * var(--riks-fs)));
	letter-spacing: -0.08em; /* confirmado en Figma: ratio -8.64px/108px en todos los títulos outline */
	text-transform: uppercase;
	line-height: 1;
	color: var(--riks-color-bg);
	-webkit-text-stroke: var(--riks-stroke-width) #000;
	paint-order: stroke fill;
}
/* Línea divisoria CORTA (feedback 2026-08: "no debe ser del ancho de la
   página, en el figma la puse mucho más corta") — medida exacta en Figma:
   850px en un canvas de 1442px de contenido útil, *0.83 ≈ 706px. Elemento
   propio (no border-top de la fila) para que no se estire con el flex. */
.riks-trabajo__divider {
	/* Figma: la línea mide 850px sobre 1442px de contenido útil.
	   min() en vez de width + max-width: con ancho fijo la línea aportaba
	   702px de min-content y estiraba la columna de grilla que la contiene
	   (en Contacto eso metía 336px de scroll horizontal en mobile). */
	width: min(calc(850px * var(--riks-fs)), 100%);
	height: var(--riks-divider-width);
	background: var(--riks-divider-color); border: none;
	/* Figma: línea en y=460, bajada en y=514.5 → 54.5px. */
	margin: 0 0 calc(54.5px * var(--riks-fs));
}
.riks-trabajo__intro-row {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
	flex-wrap: wrap;
}
.riks-trabajo__intro-row--single { justify-content: flex-start; }
/* Figma nodo 3:193: Lexend Black 48px, leading 40px, caja de 682px. */
.riks-trabajo__subtitle {
	margin: 0;
	font-family: var(--riks-font-display); font-weight: 900;
	font-size: clamp(1.85rem, 4.5vw, calc(48px * var(--riks-fs)));
	line-height: calc(40 / 48);
	max-width: calc(682px * var(--riks-fs));
}
.riks-trabajo__subtitle-accent { color: var(--riks-color-accent); }

.riks-section-title {
	font-family: var(--riks-font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	margin-bottom: 32px;
	text-transform: uppercase;
}

/* Botones — Montserrat Bold uppercase, fondo mauve (#d9a9cd confirmado en
   Figma), radio ~8px (no son pill completos). */
/* Figma nodo 17:302/17:303/17:304: alto 55.333px, ancho mínimo 235.488px,
   radio 7.721px, texto Montserrat Bold 18.015px blanco uppercase. */
.riks-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: calc(55.333px * var(--riks-fs));
	min-width: calc(235.488px * var(--riks-fs));
	padding: 0 calc(28px * var(--riks-fs));
	border-radius: calc(7.721px * var(--riks-fs));
	font-family: var(--riks-font-base);
	font-weight: 700;
	font-size: calc(18.015px * var(--riks-fs));
	text-transform: uppercase;
	letter-spacing: .02em;
	transition: opacity .2s ease, transform .2s ease;
}
.riks-btn:hover { opacity: .85; }
.riks-btn--primary { background: var(--riks-color-accent); color: #fff; }
/* En el Figma el botón secundario también va RELLENO (celeste), no en
   contorno — confirmado en el hero del Home y en el CTA de Servicios. */
.riks-btn--secondary { background: var(--riks-color-highlight); color: #fff; border: none; }
.riks-btn--whatsapp { background: var(--riks-color-whatsapp); color: #fff; }

/* ============ HEADER ============ */
/* Fondo oscuro (#3c444f) confirmado en Figma — no blanco como en el placeholder anterior. */
.riks-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--riks-color-dark);
	color: #fff;
}
.riks-header__inner {
	height: var(--riks-header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.riks-header__logo-text { font-family: var(--riks-font-display); font-weight: 900; font-size: 1.5rem; letter-spacing: .05em; }
/* El logo subido (riks-blanco.png) es un archivo grande (523x375) pensado
   para imprimir/redes, no para un header de 96px — sin este límite explícito
   se renderiza a tamaño natural y tapa el header. Proporción ~4:3 del
   isotipo, alto objetivo ~52px confirmado en Figma (nodo 1:2, ~82px sobre un
   header de 204px). */
.riks-header__logo { display: flex; align-items: center; height: 100%; }
.riks-header__logo .custom-logo-link { display: flex; align-items: center; }
.riks-header__logo img.custom-logo { width: auto; height: 52px; max-width: none; }
.riks-header__nav { display: none; align-items: center; gap: 32px; }
.riks-header__menu { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; font-family: var(--riks-font-display); font-size: .95rem; text-transform: uppercase; }
/* Confirmado en Figma (nodo 3:166): el item de nav de la página activa se
   ve en mauve, no blanco — "TRABAJO" está en color de acento en /trabajo. */
.riks-header__menu .current-menu-item > a,
.riks-header__menu .current_page_item > a,
.riks-header__menu .current-menu-parent > a { color: var(--riks-color-accent); }
/* Hover en celeste (pedido de Agustina 2026-08-13). El item activo se queda
   en rosa aunque se le pase el mouse por encima: la selección manda sobre
   el hover, si no el usuario pierde de vista en qué página está. */
.riks-header__menu a { transition: color .2s ease; }
.riks-header__menu a:hover,
.riks-header__menu a:focus-visible { color: var(--riks-color-highlight); }
.riks-header__menu .current-menu-item > a:hover,
.riks-header__menu .current_page_item > a:hover,
.riks-header__menu .current-menu-parent > a:hover { color: var(--riks-color-accent); }

/* ============ SELECTOR DE IDIOMA ============ */
/* Confirmado en Figma (nodo 1:2): una pastilla con borde mostrando el idioma
   actual ("ES 🇪🇸"), no una lista de links suelta. Al click despliega el
   otro idioma disponible. */
.riks-lang-switch { position: relative; }
.riks-lang-switch__current {
	display: flex; align-items: center; gap: 6px;
	background: none; border: 1px solid var(--riks-color-border);
	border-radius: 999px; padding: 6px 14px;
	color: #fff; font-family: var(--riks-font-display); font-weight: 300;
	font-size: .9rem; letter-spacing: .02em; cursor: pointer;
}
.riks-lang-switch__panel {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 10;
	background: #fff; border-radius: 8px; overflow: hidden;
	box-shadow: 0 8px 24px rgba(0,0,0,.15); min-width: 100px;
}
.riks-lang-switch__panel[hidden] { display: none; }
.riks-lang-switch__panel a {
	display: block; padding: 10px 16px; color: var(--riks-color-text);
	font-family: var(--riks-font-display); font-size: .9rem;
}
.riks-lang-switch__panel a:hover { background: var(--riks-color-surface); }
.riks-header__burger {
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: #fff;
}
.riks-header__burger span { width: 24px; height: 2px; background: currentColor; display: block; }

.riks-mobile-menu {
	position: fixed;
	inset: var(--riks-header-height) 0 0 0;
	background: var(--riks-color-dark);
	color: #fff;
	z-index: 49;
	padding: 32px var(--riks-container-padding);
	overflow-y: auto;
}
.riks-mobile-menu[hidden] { display: none; }
.riks-mobile-menu__list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 20px; font-size: 1.5rem; font-family: var(--riks-font-display); }

@media (min-width: 900px) {
	.riks-header__nav { display: flex; }
	.riks-header__burger { display: none; }
}

/* ============ HERO (home) ============ */
/* Confirmado en Figma (nodo 1:2) + confirmado con Agustina: no hay subtítulo
   tipo lista de servicios, lo sacó por repetitivo. Son dos líneas de copy:
   - Línea 1 (grande, Lexend Black, mayúsculas): texto blanco + cierre celeste.
   - Línea 2 (más chica, Lexend SemiBold, sin mayúsculas): texto blanco + cierre mauve. */
/* position:relative (no flex) a propósito: un .container con margin:auto
   adentro de un flex row queda centrado por las reglas de "auto margins" de
   flexbox, no pegado a la izquierda — rompía la alineación con el logo del
   header. Con position:absolute para el content, el margin:auto del
   .container vuelve a centrar el bloque MAX-WIDTH dentro del ancho
   completo, que es lo que sí alinea con el header. */
/* Figma: el hero va de y=203 a y=1134 → 931px de alto. */
.riks-hero { position: relative; min-height: calc(931px * var(--riks-fs)); color: #fff; overflow: hidden; }
.riks-hero__media { position: absolute; inset: 0; z-index: 0; }
.riks-hero__video, .riks-hero__image { width: 100%; height: 100%; object-fit: cover; }
.riks-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.6) 100%); }
/* Figma: los botones terminan en y=1035 y el hero en y=1134 → 99px abajo. */
.riks-hero__content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding-block: 0 calc(99px * var(--riks-fs)); }
.riks-hero__tagline { font-family: var(--riks-font-display); margin: 0; }
/* Figma nodo 1:13: Lexend Black 76.631px, leading 67.615px, uppercase,
   blanco con "dirección creativa." en celeste. Caja de 586px. */
.riks-hero__tagline--main {
	font-weight: var(--riks-font-weight-black);
	text-transform: uppercase;
	font-size: clamp(2rem, 4.5vw, calc(76.631px * var(--riks-fs)));
	line-height: calc(67.615 / 76.631);
	max-width: calc(586px * var(--riks-fs));
	/* Figma: el título termina en y=706 y la bajada arranca en y=790. */
	margin-bottom: calc(84px * var(--riks-fs));
}
/* Figma nodo 1:72: Lexend SemiBold (600) 48px, leading 40px, blanco con
   "memorables." en mauve. Caja de 610px. */
.riks-hero__tagline--secondary {
	font-weight: 600;
	font-size: clamp(1.25rem, 2.5vw, calc(48px * var(--riks-fs)));
	line-height: calc(40 / 48);
	max-width: calc(610px * var(--riks-fs));
	/* Figma: la bajada termina en y=870 y los botones arrancan en y=969. */
	margin-bottom: calc(99px * var(--riks-fs));
}
.riks-hero__accent--blue { color: var(--riks-color-highlight); }
.riks-hero__accent--mauve { color: var(--riks-color-accent); }
/* Figma nodos 1:73/1:74: los botones del hero son más grandes que el resto
   del sitio (280.48x65.9 contra 235.49x55.33) y van separados 25px. */
.riks-hero__ctas { display: flex; gap: calc(25px * var(--riks-fs)); flex-wrap: wrap; }
.riks-hero__ctas .riks-btn {
	min-width: calc(280.48px * var(--riks-fs));
	min-height: calc(65.905px * var(--riks-fs));
}

/* ============ GRID DE PROYECTOS ============ */
/* Ajustado contra Figma (nodo 3:166, 2026-07-08): grilla fija de 3 columnas
   en /trabajo (no auto-fill), corner-radius 10px, nombre del proyecto
   superpuesto abajo-izquierda de la imagen (no hay categoría/año visibles). */
/* Corregido (feedback 2026-08): el gris de fondo va de punta a punta detrás
   de "Trabajos Recientes" en el Home — antes tenía el fondo blanco y el gris
   estaba puesto (al revés) en la sección de Servicios/pilares. */
/* Figma: la banda gris del Home va de y=1134 a y=2385 (1251px), con el
   título en y=1250 (116px adentro). */
.riks-featured-projects {
	padding-block: calc(116px * var(--riks-fs));
	background: var(--riks-color-surface);
}
/* Figma nodo 1:71: en el Home las cards son verticales (372x415), no
   cuadradas como en /trabajo (473x449), y van separadas 45px. La grilla
   arranca en x=261 y termina en 1467 — bastante más angosta que el área
   de contenido, o sea que está centrada con márgenes propios. */
.riks-featured-projects .riks-project-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: calc(45px * var(--riks-fs));
	max-width: calc(1206px * var(--riks-fs));
	margin-inline: auto;
}
.riks-featured-projects .riks-project-card__media { aspect-ratio: 372 / 415; }
/* En el Home ninguna card lleva la pastilla "destacado" — esa es propia de
   la grilla de /trabajo (Figma nodo 45:804). */
.riks-featured-projects .riks-project-card__badge { display: none; }
/* Figma: la bajada termina en y=626 y la primera fila de cards arranca en
   y=718 → 92px. */
.riks-trabajo__grid { padding-block: calc(92px * var(--riks-fs)) 0; --riks-section-title-fill: var(--riks-color-bg); }
.riks-project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: calc(30px * var(--riks-fs));
}
/* Figma: la grilla va de x=124 a x=1603 (1479px), o sea que se desborda
   ~19px del área de contenido (143..1585) por cada lado. */
.riks-trabajo__grid .riks-project-grid {
	grid-template-columns: repeat(3, 1fr);
	width: calc(100% + 38px * var(--riks-fs));
	margin-inline: calc(-19px * var(--riks-fs));
}
@media (max-width: 900px) {
	.riks-trabajo__grid .riks-project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.riks-trabajo__grid .riks-project-grid { grid-template-columns: 1fr; }
}
.riks-project-card { position: relative; display: block; }
/* Figma: cards de 473.33 x 449.5 con radio 10px (nodo 3:199). */
.riks-project-card__media { position: relative; aspect-ratio: 473.33 / 449.5; overflow: hidden; border-radius: 10px; background: #f2f2f2; }
.riks-project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.riks-project-card:hover .riks-project-card__media img { transform: scale(1.04); }
/* Hover — feedback de Agustina (2026-08): el velo azul tiene que ir con
   blend mode "multiply" (se oscurece según lo que hay debajo de la foto, más
   oscuro que una simple superposición semi-transparente) y el texto va
   justificado a la izquierda, no centrado. Van en dos capas separadas: el
   velo con multiply no puede llevar el texto adentro (un <p> blanco
   blendeado en multiply se vuelve invisible). */
.riks-project-card__hover-veil {
	position: absolute; inset: 0;
	background: var(--riks-color-dark);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity .3s ease;
}
.riks-project-card:hover .riks-project-card__hover-veil { opacity: 1; }
/* align-items: flex-start (arriba), no flex-end — el nombre del proyecto
   vive fijo abajo-izquierda (.riks-project-card__name) y con textos de
   bajada largos el hover terminaba encimado arriba del título. */
/* Centrado verticalmente en el espacio disponible ARRIBA del nombre del
   proyecto (que vive fijo abajo-izquierda) — feedback 2026-08: quedaba muy
   pegado arriba. padding-bottom grande para no invadir el área del nombre. */
.riks-project-card__hover {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: flex-start;
	text-align: left;
	padding: 32px 32px 110px;
	color: #fff;
	opacity: 0;
	transition: opacity .3s ease;
}
.riks-project-card:hover .riks-project-card__hover { opacity: 1; }
.riks-project-card__hover p { margin: 0; font-size: 1rem; line-height: 1.4; }
/* Figma nodos 45:804/45:803: pastilla de 262x57 a 44px del borde derecho
   y 39px del superior; texto Montserrat Medium (500) 25px, tracking 2.5px. */
.riks-project-card__badge {
	position: absolute;
	top: calc(39px * var(--riks-fs)); right: calc(44px * var(--riks-fs)); z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: calc(262px * var(--riks-fs)); min-height: calc(57px * var(--riks-fs));
	background: var(--riks-color-accent); color: #fff;
	border: none;
	font-family: var(--riks-font-base); font-weight: 500;
	font-size: calc(25px * var(--riks-fs)); letter-spacing: .1em;
	text-transform: uppercase;
	padding: 0 calc(20px * var(--riks-fs)); border-radius: 999px;
}
/* Figma nodo 3:200: Lexend SemiBold (600) 33px, leading 30px, blanco,
   uppercase, a 48px del borde izquierdo y 42px del inferior. */
.riks-project-card__name {
	position: absolute;
	left: calc(48px * var(--riks-fs)); bottom: calc(42px * var(--riks-fs)); z-index: 2;
	font-family: var(--riks-font-display); font-weight: 600;
	font-size: clamp(1.1rem, 2vw, calc(33px * var(--riks-fs)));
	line-height: calc(30 / 33);
	color: #fff; text-transform: uppercase;
	max-width: 80%;
}
/* La card destacada es más ANCHA pero misma ALTURA que una normal (confirmado
   en Figma: 449px alto en la de 1 columna, 448px alto en la de 2 columnas
   — no es la misma proporción 21:20 escalada, si no quedaba un hueco enorme
   debajo de la card angosta de al lado). */
.riks-trabajo__grid .riks-project-card--featured { grid-column: span 2; }
/* Figma nodo 3:201: la card destacada mide 976x448 — más ancha pero de la
   MISMA altura que una normal, no la misma proporción escalada. */
.riks-trabajo__grid .riks-project-card--featured .riks-project-card__media { aspect-ratio: 976 / 448; }
@media (max-width: 900px) {
	.riks-trabajo__grid .riks-project-card--featured { grid-column: span 1; }
	.riks-trabajo__grid .riks-project-card--featured .riks-project-card__media { aspect-ratio: 21 / 20; }
}

/* ============ FILTROS (trabajo) ============ */
/* Un solo botón "Filtrar" que despliega un panel — no una fila de pills. */
.riks-trabajo__filter-wrap { position: relative; display: inline-block; flex-shrink: 0; }
/* Figma nodos 3:264/3:263: caja de 182x57 en contorno mauve, alineada al
   borde derecho de la grilla y abajo con la bajada. */
.riks-filter-toggle {
	background: none; border: var(--riks-divider-width) solid var(--riks-color-accent);
	border-radius: 5px; color: var(--riks-color-accent);
	display: inline-flex; align-items: center; justify-content: center;
	min-width: calc(182px * var(--riks-fs)); min-height: calc(57px * var(--riks-fs));
	padding: 0 calc(20px * var(--riks-fs)); cursor: pointer;
	font-family: var(--riks-font-base);
	font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	font-size: calc(25px * var(--riks-fs));
}
.riks-filter-panel {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 10;
	display: flex; flex-direction: column; gap: 4px;
	background: #fff; border: 1px solid var(--riks-color-border); border-radius: 8px;
	padding: 12px; min-width: 220px; box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.riks-filter-panel[hidden] { display: none; }
.riks-filter {
	background: none; border: none; text-align: left;
	padding: 8px 12px; border-radius: 5px; cursor: pointer; font-family: inherit; font-size: .9rem;
}
.riks-filter.is-active { background: var(--riks-color-accent); color: #fff; }
.riks-filter:hover:not(.is-active) { background: var(--riks-color-surface); }
.riks-project-card[data-filtered-out] { display: none; }

/* ============ TÍTULOS DE SECCIÓN GRANDES (Home) ============ */
/* Confirmado en Figma (nodo 1:2, "TRABAJOS RECIENTES" / "SERVICIOS"): texto
   enorme en contorno, acompañado de una línea horizontal fina a la derecha.
   Ajustado 2026-08 (feedback de Agustina): el contorno tiene que ser negro
   puro y el relleno el color de fondo de la sección (no transparente — con
   fill transparente los trazos se auto-intersectan en las curvas cerradas
   de las letras y quedan artefactos feos). --riks-section-title-fill se
   define por sección más abajo (blanco sobre fondo blanco, gris sobre la
   superficie de pilares). */
/* Figma nodos 3:194 / 3:195: Montserrat Black 78px, leading 40px, tracking
   -6.24px (=-0.08em), relleno #d9d9d9 y contorno navy — el MISMO relleno en
   la sección gris y en la blanca (antes el relleno se cambiaba por sección
   con --riks-section-title-fill). La caja arranca en x=91, o sea 52px a la
   izquierda del margen de contenido. */
.riks-section-title-huge {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0 0 40px calc(-52px * var(--riks-fs));
	font-family: var(--riks-font-base);
	font-weight: 900;
	font-size: clamp(2.5rem, 6vw, calc(78px * var(--riks-fs)));
	letter-spacing: -0.08em; /* confirmado en Figma: ratio -6.24px/78px */
	text-transform: uppercase;
	line-height: 1;
	color: var(--riks-color-surface);
	-webkit-text-stroke: var(--riks-stroke-width) var(--riks-color-dark);
	paint-order: stroke fill;
	white-space: nowrap;
}
.riks-section-title-huge::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--riks-color-text-muted);
	opacity: .4;
	-webkit-text-stroke: 0;
}

/* ============ PILARES (home) ============ */
/* Fondo #d9d9d9 confirmado en Figma para la sección de pilares/servicios. */
.riks-pilares { padding-block: 64px; }
/* El título "SERVICIOS" del Home va con relleno BLANCO, no gris (pedido de
   Agustina 2026-08-13). El de "TRABAJOS RECIENTES" se queda en gris: van
   sobre fondos distintos (blanco vs. la banda #d9d9d9) y por eso el relleno
   no es el mismo en los dos. */
.riks-pilares .riks-section-title-huge { color: var(--riks-color-bg); }
.riks-pilares__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
/* Card con borde mauve confirmada contra Figma (nodo 1:2, nodos 1:109/110/111):
   caja bordeada con radius 10px, ícono, título, descripción, divisor y link
   "Ver más" — antes era texto suelto sin caja. */
.riks-pilar-card {
	display: flex;
	flex-direction: column;
	padding: 40px 32px;
	border: 2px solid var(--riks-color-accent);
	border-radius: 10px;
	background: var(--riks-color-bg);
}
.riks-pilar-card__icon { width: 44px; height: 44px; margin-bottom: 24px; align-self: flex-end; }
.riks-pilar-card__title { font-family: var(--riks-font-display); font-weight: 800; font-size: 1.5rem; margin: 0 0 16px; text-transform: uppercase; }
.riks-pilar-card__desc { color: var(--riks-color-text-muted); margin: 0; flex-grow: 1; }
.riks-pilar-card__divider { border: none; border-top: 2px solid var(--riks-color-text); margin: 28px 0 16px; opacity: .15; }
.riks-pilar-card__link {
	font-family: var(--riks-font-base); font-size: .8rem; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase; color: var(--riks-color-accent);
}
.riks-featured-projects__cta { text-align: center; margin-top: 48px; }

/* ============ LOGOS DE CLIENTES (carousel) ============ */
/* Fondo oscuro #3c444f confirmado en Figma (misma barra que el header). */
.riks-client-logos { background: var(--riks-color-dark); padding-block: 40px; overflow: hidden; }
.riks-client-logos__track { display: flex; gap: 64px; width: max-content; animation: riks-logo-scroll 30s linear infinite; }
/* Slot de ancho Y alto fijos (no solo alto): los logos de clientes son de
   tipos muy distintos — wordmarks anchos (Gripple, TMC.agro) vs. isotipos
   casi cuadrados (Grace, El Porvenir) — con solo height:100% el isotipo
   cuadrado ocupaba mucho menos espacio horizontal y se veía "más chico"
   aunque tuviera la misma altura. object-fit:contain dentro de un slot fijo
   iguala el tamaño visual real de cada logo en la barra. */
.riks-client-logos__item {
	display: flex; align-items: center; justify-content: center;
	/* Ancho propio por logo (lo inyecta el template desde Theme Options) y
	   alto libre: así cada marca conserva su proporción real. Antes todos
	   entraban en una caja de 150x48 con object-fit:contain, y como las
	   proporciones van de 0.97 a 7.5 el resultado eran tamaños dispares:
	   el logo casi cuadrado se achicaba hasta 48px de ancho y el wordmark
	   largo quedaba en una tira de 20px de alto. */
	width: var(--riks-logo-w, 140px);
	flex-shrink: 0;
}
.riks-client-logos__item img {
	width: 100%; height: auto; max-height: calc(126px * var(--riks-fs));
	object-fit: contain;
	filter: grayscale(1) brightness(0) invert(1); opacity: .8;
}
@keyframes riks-logo-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.riks-client-logos__track { animation: none; overflow-x: auto; }
}

/* ============ CTA FINAL ============ */
/* .riks-servicios__cta salió de acá: tiene su propia regla más abajo con
   las medidas del Figma, y este text-align:center se le colaba por
   herencia al copy y al botón (que van alineados a la izquierda). */
.riks-featured-cta { padding-block: 80px; text-align: center; }
.riks-servicios__cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* Confirmado en Figma (nodo 1:2, bloque "¿Tenés un proyecto en mente?"):
   título alineado a la derecha + divisor vertical + descripción/botones a la
   derecha — no es un bloque centrado con dos botones como antes. */
/* Fondo blanco (no gris — corregido, ver nota en featured-projects/pilares). */
.riks-cta-final { padding-block: 96px; }
.riks-cta-final__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; }
.riks-cta-final__title {
	margin: 0; text-align: right;
	font-family: var(--riks-font-display); font-weight: 900;
	font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15;
}
.riks-cta-final__divider { width: 2px; align-self: stretch; background: var(--riks-color-accent); }
.riks-cta-final__subtitle { margin: 0 0 24px; font-family: var(--riks-font-display); font-weight: 500; font-size: 1.25rem; }
.riks-cta-final__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Botón celeste relleno (confirmado en Figma) — antes era un botón outline mauve. */
.riks-cta-final__btn { background: var(--riks-color-highlight); color: #fff; }
@media (max-width: 900px) {
	.riks-cta-final__inner { grid-template-columns: 1fr; text-align: center; }
	.riks-cta-final__title { text-align: center; }
	.riks-cta-final__divider { width: 100%; height: 2px; }
	.riks-cta-final__actions { justify-content: center; }
}

/* ============ FOOTER ============ */
/* Fondo #d9d9d9 confirmado en Figma (misma superficie clara que pilares). */
.riks-footer { background: var(--riks-color-surface); padding-block: 48px; margin-top: 64px; }
.riks-footer__inner { display: flex; flex-direction: column; gap: 24px; }
/* Confirmado en Figma: una fila con logo / nav / redes, y abajo el
   copyright centrado — no todo apilado y alineado a la izquierda. */
.riks-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.riks-footer__copy { text-align: center; }
/* Mismo bug que el logo del header: sin este límite el logo (2560x1838
   real) se renderiza a tamaño natural. Confirmado en Figma (nodo 1:2):
   logo blanco a opacity .7 sobre el fondo claro del footer — es un
   elemento de marca discreto a propósito, no un logo grande. */
.riks-footer__logo { opacity: .7; }
.riks-footer__logo .custom-logo-link { display: flex; }
.riks-footer__logo img.custom-logo { width: auto; height: 44px; max-width: none; }
.riks-footer__menu { display: flex; gap: 20px; list-style: none; padding: 0; flex-wrap: wrap; font-family: var(--riks-font-display); text-transform: uppercase; font-size: .9rem; }
/* Los SVG de redes vienen con tamaños nativos distintos entre sí (Instagram
   30x34.69, TikTok/LinkedIn 40x40, Behance 40x40) — sin fijar el tamaño acá
   se veían todos de porte distinto y desalineados en la fila. */
.riks-social-links { display: flex; align-items: center; gap: 16px; list-style: none; padding: 0; margin: 0; }
.riks-social-links__item a { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: inherit; }
.riks-social-links__item svg { width: 100%; height: 100%; display: block; }
.riks-footer__copy { color: var(--riks-color-text-muted); font-size: .85rem; }

/* ============ WHATSAPP FLOTANTE ============ */
/* El SVG (whatsapp.svg) ya trae su propio círculo verde con degradé, así que
   el wrapper no lleva background propio (antes duplicaba el círculo). */
.riks-whatsapp-float {
	position: fixed; bottom: 24px; right: 24px; z-index: 60;
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
}
.riks-whatsapp-float__icon, .riks-whatsapp-float__icon svg { width: 100%; height: 100%; display: block; }

/* ============ PÁGINA DE PROYECTO ============ */
/* Corregido 2026-07-08 (2da pasada, con feedback directo sobre el render):
   el título y la bajada van SUPERPUESTOS sobre la imagen de hero, no en un
   bloque aparte arriba. */
/* position:relative (no flex) a propósito — mismo motivo que .riks-hero
   más arriba: flex + .container con margin:auto centra el bloque en vez de
   pegarlo a la izquierda, y no quedaba alineado con el logo del header. */
/* Figma nodos 40:459 / 61:812: la foto de hero va de y=204 a y=819, o sea
   615px de alto, a todo el ancho y con las esquinas de abajo redondeadas. */
.riks-proyecto__hero {
	position: relative;
	overflow: hidden;
	border-radius: 0 0 40px 40px;
	min-height: calc(615px * var(--riks-fs));
}
.riks-proyecto__hero img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.riks-proyecto__hero-overlay {
	position: absolute; inset: 0;
	/* Velo oscuro para que el título blanco tenga contraste legible sobre
	   cualquier foto que suba Agustina. */
	background: linear-gradient(180deg, rgba(60,68,79,.25) 0%, rgba(60,68,79,.7) 100%);
}
/* Figma: el bloque de título arranca en y=460 y la bajada termina en y=734,
   con el hero terminando en y=819 → 85px por debajo. */
.riks-proyecto__hero-content {
	position: absolute; left: 0; right: 0; bottom: 0;
	z-index: 1;
	padding-block: 0 calc(85px * var(--riks-fs));
	color: #fff;
}
/* Figma nodo 40:483: Montserrat Black 100px, leading 80px, tracking -8px
   (=-0.08em), BLANCO SÓLIDO (no en contorno). Caja de 701px, que es lo que
   lo hace cortar en dos líneas. */
.riks-proyecto__title {
	font-family: var(--riks-font-base);
	font-weight: 900;
	max-width: calc(701px * var(--riks-fs));
	font-size: clamp(2.5rem, 6vw, calc(100px * var(--riks-fs)));
	line-height: calc(80 / 100);
	letter-spacing: -0.08em;
	text-transform: uppercase;
	color: #fff;
	/* Figma: el título termina en y=620 y la línea está en y=678 → 58px. */
	margin: 0 0 calc(58px * var(--riks-fs));
}
/* Figma nodo 40:486: línea fina de 701px entre el título y la bajada. */
.riks-proyecto__hero-line {
	width: calc(701px * var(--riks-fs)); max-width: 100%;
	height: 1.5px; background: rgba(255,255,255,.75); border: none;
	margin: 0 0 calc(16px * var(--riks-fs));
}
/* Figma nodo 40:484: bajada redactada a mano, debajo de la línea. */
.riks-proyecto__meta {
	font-family: var(--riks-font-display); font-weight: 400;
	font-size: clamp(1rem, 2vw, calc(30px * var(--riks-fs)));
	line-height: calc(40 / 30);
	color: #fff; margin: 0;
}

/* Figma nodos 40:522/524/525: tres columnas de 458px separadas 51px, que
   arrancan 100px debajo del hero. */
.riks-proyecto__cuerpo {
	padding-block: calc(100px * var(--riks-fs)) 0;
	display: grid; gap: calc(51px * var(--riks-fs));
	grid-template-columns: repeat(3, 1fr);
}
/* La plantilla de branding usa DOS columnas de 700px, no tres (nodo 61:812). */
.riks-proyecto__cuerpo--branding { grid-template-columns: repeat(2, 1fr); gap: calc(73px * var(--riks-fs)); }
/* Figma: etiqueta en Lexend Black 40px, leading 35px, #3c444f. */
.riks-proyecto__bloque-label {
	font-family: var(--riks-font-display); font-weight: 900;
	font-size: clamp(1.25rem, 2.2vw, calc(40px * var(--riks-fs)));
	line-height: calc(35 / 40);
	color: var(--riks-color-dark);
	margin: 0 0 calc(12px * var(--riks-fs));
}
/* Figma: cuerpo en Montserrat Regular 30px, leading 35px, #3c444f. */
.riks-proyecto__bloque-texto {
	font-family: var(--riks-font-base); font-weight: 400;
	font-size: clamp(.95rem, 1.8vw, calc(30px * var(--riks-fs)));
	line-height: calc(35 / 30);
	color: var(--riks-color-dark);
	margin: 0;
}
.riks-proyecto__bloque-texto p { margin: 0; }
.riks-proyecto__bloque-texto strong { font-weight: 700; }

/* ---- Bloques propios de la plantilla branding (Figma 61:812) ---- */
/* Fila de pictogramas: 7 íconos de ~90px repartidos a lo ancho, 100px
   debajo del texto. */
.riks-proyecto__iconos {
	display: flex; align-items: center; justify-content: space-between;
	gap: calc(40px * var(--riks-fs));
	padding-block: calc(80px * var(--riks-fs));
	flex-wrap: wrap;
}
.riks-proyecto__icono { height: calc(100px * var(--riks-fs)); width: auto; }
/* "La solución de marca" a la izquierda (701px) y el logo + la paleta a la
   derecha (empiezan en x=972 → 829px del margen de contenido). */
.riks-proyecto__marca {
	display: grid; grid-template-columns: calc(701px * var(--riks-fs)) 1fr;
	gap: calc(128px * var(--riks-fs));
	align-items: start;
	padding-block: calc(60px * var(--riks-fs));
}
/* Sin bloque de texto al lado (proyectos que sólo tienen logo), el logo se
   centra en el ancho completo en vez de quedar corrido a la derecha. */
.riks-proyecto__marca--solo-visual { grid-template-columns: 1fr; }
.riks-proyecto__marca-visual { display: flex; flex-direction: column; align-items: center; gap: calc(66px * var(--riks-fs)); }
/* Figma nodo 66:868: el logo mide 548x219. */
.riks-proyecto__marca-logo { width: 100%; max-width: calc(548px * var(--riks-fs)); height: auto; }
/* Figma nodos 66:869..67:873: 5 cuadrados de 104px separados ~20px. */
.riks-proyecto__paleta { list-style: none; margin: 0; padding: 0; display: flex; gap: calc(20px * var(--riks-fs)); flex-wrap: wrap; justify-content: center; }
.riks-proyecto__paleta li { width: calc(104px * var(--riks-fs)); height: calc(104px * var(--riks-fs)); border-radius: 4px; }
/* Figma nodos 67:876/877: dos mockups a todo el ancho de la pantalla
   (x=0 a x=1728), 648px de alto, sin separación entre ellos. */
.riks-proyecto__mockups { display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(112px * var(--riks-fs)); }
.riks-proyecto__mockups img { width: 100%; aspect-ratio: 865 / 648; object-fit: cover; }
@media (max-width: 900px) {
	.riks-proyecto__cuerpo, .riks-proyecto__cuerpo--branding { grid-template-columns: 1fr; }
	.riks-proyecto__marca { grid-template-columns: 1fr; gap: 48px; }
	.riks-proyecto__mockups { grid-template-columns: 1fr; }
}

/* Figma nodos 40:527 y siguientes: el collage NO es una masonry de piezas
   iguales — es una grilla de 14 columnas donde las fotos ocupan 3 columnas
   (320px) por 1 fila (480px), y los videos ocupan 5 columnas (~541px) por 2
   filas (~970px). Verificado contra las medidas del frame:
     14 columnas de 98.4px + 13 gaps de 12px = 1534px de ancho total
     foto  = 3 col → 3*98.4 + 2*12 = 320px   ✓
     video = 5 col → 5*98.4 + 4*12 = 541px   ✓
     video = 2 filas → 2*480 + 12 = 972px    ✓
   Antes esto estaba resuelto con columnas CSS, que le daba a todos los items
   el mismo ancho y por eso los videos se veían chicos. grid-auto-flow:dense
   hace que las fotos rellenen los huecos que dejan los videos. */
.riks-proyecto__galeria { padding-block: calc(121px * var(--riks-fs)) 0; }
.riks-proyecto__galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: calc(12px * var(--riks-fs)); }
.riks-proyecto__galeria-grid--masonry {
	display: grid;
	grid-template-columns: repeat(14, 1fr);
	grid-auto-rows: calc(480px * var(--riks-fs));
	grid-auto-flow: row dense;
	gap: calc(12px * var(--riks-fs));
	/* Se desborda ~46px del margen de contenido por cada lado, igual que en
	   el Figma (la grilla va de x=97 a x=1631 sobre un contenido de 143..1585). */
	width: calc(100% + 92px * var(--riks-fs));
	margin-inline: calc(-46px * var(--riks-fs));
}
.riks-proyecto__galeria-grid--masonry .riks-proyecto__galeria-item { grid-column: span 3; grid-row: span 1; }
.riks-proyecto__galeria-grid--masonry .riks-proyecto__galeria-item--video { grid-column: span 5; grid-row: span 2; }
.riks-proyecto__galeria-item img,
.riks-proyecto__galeria-item video {
	width: 100%; height: 100%; display: block;
	object-fit: cover; border-radius: 6px;
	background: var(--riks-color-surface);
}
/* Video apaisado: bloque propio, centrado, de 1018x574 — el tamaño que tiene
   en el Figma en la página de IES (nodo 43:790). Es 16:9, así que Mindtech e
   IES (los dos videos horizontales del sitio) quedan del mismo tamaño. */
.riks-proyecto__galeria-wide {
	margin-block: calc(12px * var(--riks-fs));
	text-align: center;
}
.riks-proyecto__galeria-wide video {
	display: inline-block; width: 100%;
	max-width: calc(1018px * var(--riks-fs));
	aspect-ratio: 1018 / 574; object-fit: cover;
	border-radius: 6px; background: var(--riks-color-surface);
}
@media (max-width: 900px) {
	/* En pantallas chicas la grilla pasa a 6 columnas: la foto ocupa 3 (media
	   pantalla) y el video las 6, con 2 filas de alto. */
	.riks-proyecto__galeria-grid--masonry {
		grid-template-columns: repeat(6, 1fr);
		grid-auto-rows: calc(38vw * 1.5);
		width: 100%; margin-inline: 0;
	}
	.riks-proyecto__galeria-grid--masonry .riks-proyecto__galeria-item--video { grid-column: span 6; }
}
@media (max-width: 600px) {
	.riks-proyecto__galeria-grid--masonry { grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc(80vw * 1.5); }
	.riks-proyecto__galeria-grid--masonry .riks-proyecto__galeria-item { grid-column: span 3; }
	.riks-proyecto__galeria-grid--masonry .riks-proyecto__galeria-item--video { grid-column: span 3; }
}

/* Figma nodos 42:549..42:553: "anterior"/"siguiente" en cajas de 182x57 con
   borde mauve, y "ver todos los proyectos" como texto mauve centrado. Todo
   en Montserrat Medium 30px, minúsculas. Sin línea divisoria arriba. */
.riks-proyecto__nav {
	display: flex; justify-content: space-between; align-items: center;
	padding-block: calc(81px * var(--riks-fs)) calc(60px * var(--riks-fs));
	flex-wrap: wrap; gap: 16px;
}
.riks-proyecto__nav-link {
	font-family: var(--riks-font-base); font-weight: 500;
	font-size: clamp(1rem, 2vw, calc(30px * var(--riks-fs)));
	text-transform: lowercase; color: var(--riks-color-accent);
}
.riks-proyecto__nav-link--prev, .riks-proyecto__nav-link--next {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: calc(182px * var(--riks-fs)); min-height: calc(57px * var(--riks-fs));
	border: var(--riks-divider-width) solid var(--riks-color-accent); border-radius: 5px;
	padding: 0 calc(16px * var(--riks-fs));
}
/* ---- Featured template (IES Desarrollos) ---- */
/* ---- Template featured (IES Desarrollos, Figma 42:610) ---- */
/* La bajada fuerte del hero: Montserrat ExtraBold 40px, leading 40,
   tracking -3.2px (=-0.08em), gris #d9d9d9 (nodo 42:658). */
.riks-proyecto__hero-tagline {
	margin: 0 0 calc(34px * var(--riks-fs));
	max-width: calc(650px * var(--riks-fs));
	font-family: var(--riks-font-base); font-weight: 800;
	font-size: clamp(1.1rem, 2.4vw, calc(40px * var(--riks-fs)));
	line-height: 1; letter-spacing: -0.08em;
	color: var(--riks-color-surface);
}

/* Figma nodos 43:719..43:724: 6 cajas de 426.88x282.66 en 3 columnas, con
   26.68px entre columnas y 23.7px entre filas, borde mauve de 2.668px y
   radio 13.34px. La grilla arranca en x=177 (34px adentro del margen de
   contenido) y el hero termina 50px antes. */
.riks-featured-metricas { padding-block: calc(50px * var(--riks-fs)) 0; }
.riks-featured-metricas__grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	column-gap: calc(26.68px * var(--riks-fs)); row-gap: calc(23.7px * var(--riks-fs));
}
.riks-featured-metricas__item {
	display: flex; flex-direction: column;
	min-height: calc(282.66px * var(--riks-fs));
	padding: calc(52px * var(--riks-fs)) calc(51px * var(--riks-fs));
	border: calc(2.668px * var(--riks-fs)) solid var(--riks-color-accent);
	border-radius: calc(13.34px * var(--riks-fs));
}
/* Figma nodo 42:662: Lexend Black 73.37px, leading 45.356, tracking -3.6685px. */
.riks-featured-metricas__numero {
	display: block;
	font-family: var(--riks-font-display); font-weight: 900;
	font-size: clamp(2rem, 4.5vw, calc(73.37px * var(--riks-fs)));
	line-height: calc(45.356 / 73.37); letter-spacing: -0.05em;
	color: var(--riks-color-text);
}
.riks-featured-metricas__linea {
	width: 100%; height: calc(2.668px * var(--riks-fs));
	background: var(--riks-color-accent); border: none;
	margin: calc(41px * var(--riks-fs)) 0 calc(25px * var(--riks-fs));
}
/* Figma nodo 42:663: Lexend Light (300) 35px, leading 40.02, #3c444f. */
.riks-featured-metricas__etiqueta {
	font-family: var(--riks-font-display); font-weight: 300;
	font-size: clamp(.95rem, 2vw, calc(35px * var(--riks-fs)));
	line-height: calc(40.02 / 35);
	color: var(--riks-color-dark);
}

/* Títulos de sección de esta plantilla ("El proyecto", "Lo que hicimos"):
   Lexend Black 40px, leading 35 — el mismo tratamiento que las etiquetas de
   bloque de las otras plantillas de proyecto. */
.riks-featured-titulo {
	margin: 0 0 calc(50px * var(--riks-fs));
	font-family: var(--riks-font-display); font-weight: 900;
	font-size: clamp(1.25rem, 2.2vw, calc(40px * var(--riks-fs)));
	line-height: calc(35 / 40);
	color: var(--riks-color-text);
}

/* Figma: párrafo de 914px a la izquierda y el logo del cliente (298x110)
   a la derecha, arrancando en x=1217. */
.riks-featured-proyecto {
	display: grid; grid-template-columns: calc(914px * var(--riks-fs)) 1fr;
	gap: calc(60px * var(--riks-fs));
	align-items: start;
	padding-block: calc(84px * var(--riks-fs)) 0;
}
.riks-featured-proyecto__texto {
	margin: 0;
	font-family: var(--riks-font-base); font-weight: 400;
	font-size: clamp(.95rem, 1.8vw, calc(30px * var(--riks-fs)));
	line-height: calc(35 / 30);
	color: var(--riks-color-dark);
}
.riks-featured-proyecto__logo { width: 100%; max-width: calc(298px * var(--riks-fs)); height: auto; justify-self: end; }

/* Figma: las etapas (cajas de 1109px) van a la izquierda y la caja gris de
   prensa (380x901) a la derecha, en la misma fila. */
.riks-featured-etapas { padding-block: calc(50px * var(--riks-fs)) 0; }
.riks-featured-etapas__row {
	display: grid; grid-template-columns: calc(1109px * var(--riks-fs)) calc(380px * var(--riks-fs));
	gap: calc(42px * var(--riks-fs));
	align-items: start;
}
.riks-featured-etapas__lista { display: flex; flex-direction: column; gap: calc(42px * var(--riks-fs)); }
/* Figma nodos 43:739/758/761: cajas con borde fino y esquinas redondeadas. */
.riks-featured-etapa {
	border: 1.5px solid var(--riks-color-border); border-radius: 10px;
	padding: calc(39px * var(--riks-fs)) calc(50px * var(--riks-fs));
}
/* Figma nodo 43:728: Montserrat Black 30px, leading 35, MAUVE, mayúsculas. */
.riks-featured-etapa__titulo {
	margin: 0 0 calc(24px * var(--riks-fs));
	font-family: var(--riks-font-base); font-weight: 900;
	font-size: clamp(1rem, 1.8vw, calc(30px * var(--riks-fs)));
	line-height: calc(35 / 30); text-transform: uppercase;
	color: var(--riks-color-accent);
}
.riks-featured-etapa__contenido {
	font-family: var(--riks-font-base); font-weight: 400;
	font-size: clamp(.9rem, 1.6vw, calc(30px * var(--riks-fs)));
	line-height: calc(35 / 30);
	color: var(--riks-color-dark);
}
.riks-featured-etapa__contenido p { margin: 0; }
/* Caja gris con los logos de prensa, en blanco y centrados. */
.riks-featured-medios {
	background: var(--riks-color-surface); border-radius: 10px;
	padding: calc(74px * var(--riks-fs)) calc(64px * var(--riks-fs));
	display: flex; flex-direction: column; align-items: center;
	gap: calc(74px * var(--riks-fs));
}
.riks-featured-medios img {
	max-width: 100%; height: auto;
	/* Los logos vienen de medios distintos y en colores distintos: se
	   pasan a blanco para que la caja se lea como una sola pieza. */
	filter: grayscale(1) brightness(0) invert(1); opacity: .95;
}
.riks-featured-medios__dato { margin: 0; font-weight: 600; color: #fff; text-align: center; }

/* Figma nodos 43:784..43:789: en esta plantilla la galería NO es un collage
   en masonry como en Grace — son 6 fotos apaisadas iguales (501x334) en una
   grilla pareja de 3 columnas con 14px de separación, desbordada ~45px del
   margen de contenido por cada lado. */
.riks-proyecto--featured .riks-proyecto__galeria-grid--masonry {
	display: grid; grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: auto; gap: calc(14px * var(--riks-fs));
	width: calc(100% + 90px * var(--riks-fs));
	margin-inline: calc(-45px * var(--riks-fs));
}
/* Se anulan los spans de la grilla de 14 columnas: acá todas las piezas
   ocupan una celda pareja. El video, en cambio, sí toma 2 filas para no
   quedar aplastado dentro de una celda apaisada. */
.riks-proyecto--featured .riks-proyecto__galeria-item { margin-bottom: 0; grid-column: span 1; grid-row: span 1; }
.riks-proyecto--featured .riks-proyecto__galeria-item--video { grid-column: span 1; grid-row: span 2; }
.riks-proyecto--featured .riks-proyecto__galeria-item img,
.riks-proyecto--featured .riks-proyecto__galeria-item video {
	width: 100%; aspect-ratio: 501 / 334; object-fit: cover; border-radius: 6px;
}
@media (max-width: 900px) {
	.riks-proyecto--featured .riks-proyecto__galeria-grid--masonry {
		grid-template-columns: repeat(2, 1fr); width: 100%; margin-inline: 0;
	}
}

/* Figma nodo 43:790: imagen grande y centrada de 1018px. */
.riks-featured-cierre { padding-block: calc(61px * var(--riks-fs)) 0; text-align: center; }
.riks-featured-cierre img {
	display: inline-block; width: 100%;
	max-width: calc(1018px * var(--riks-fs));
	aspect-ratio: 1018 / 574; object-fit: cover; border-radius: 10px;
}

/* Figma nodo 43:791: mismo patrón de CTA que el resto del sitio — título a
   la derecha, línea vertical mauve, botón celeste. */
.riks-featured-cta { padding-block: calc(44px * var(--riks-fs)) 0; text-align: left; }
.riks-featured-cta__inner {
	display: grid; grid-template-columns: calc(696px * var(--riks-fs)) auto auto;
	gap: calc(98px * var(--riks-fs));
	align-items: center; justify-content: center;
}
.riks-featured-cta__title {
	margin: 0; text-align: right;
	font-family: var(--riks-font-display); font-weight: 900;
	font-size: clamp(1.25rem, 2.4vw, calc(38px * var(--riks-fs)));
	line-height: calc(40 / 38);
	color: var(--riks-color-text);
}
.riks-featured-cta__divider {
	width: var(--riks-divider-width); height: calc(114px * var(--riks-fs));
	background: var(--riks-color-accent);
}
@media (max-width: 900px) {
	.riks-featured-metricas__grid { grid-template-columns: 1fr; }
	.riks-featured-proyecto,
	.riks-featured-etapas__row { grid-template-columns: 1fr; }
	.riks-featured-proyecto__logo { justify-self: start; }
	.riks-featured-cta__inner { grid-template-columns: 1fr; justify-items: center; }
	.riks-featured-cta__title { text-align: center; }
	.riks-featured-cta__divider { width: 100%; height: var(--riks-divider-width); }
}
/* ============ SERVICIOS ============ */
/* Reescrito contra Figma (nodo 3:265, 2026-08) — antes era texto plano
   separado por líneas finas; el diseño real son cards grandes con borde de
   color, ícono, y los "incluye" como pills, no como una frase con "·". */
/* SOLO padding-bottom acá — el padding-top viene de .riks-trabajo__intro
   (compartida con Trabajo). Antes esta regla pisaba el padding-top con
   48px en vez de 6.6rem, por eso Servicios quedaba más pegado al header
   que Trabajo (feedback 2026-08: "están a distintas distancias del
   header"). */
/* Figma: la bajada termina en y=784.5 y la primera card arranca en
   y=907 → 122.5px. El padding-top viene de .riks-trabajo__intro. */
.riks-servicios__intro { padding-bottom: calc(122.5px * var(--riks-fs)); }
/* Figma nodo 5:52: Lexend SemiBold (600) 48px, leading 45px, caja de
   839px. El peso es distinto al de Trabajo (que va Black/900) — está
   así en el Figma, no es un error. */
.riks-servicios__bajada {
	font-family: var(--riks-font-display); font-weight: 600;
	font-size: clamp(1.85rem, 4.5vw, calc(48px * var(--riks-fs)));
	line-height: calc(45 / 48);
	max-width: calc(839px * var(--riks-fs));
}
.riks-servicios__bajada p { margin: 0; }
/* "Aire antes de Mi rol.." — en Figma hay un párrafo vacío entero de
   45px de leading entre los dos bloques. */
.riks-servicios__bajada p.riks-servicios__bajada-p2 { margin-top: calc(45px * var(--riks-fs)); }
.riks-servicios__bajada-mauve { display: block; color: var(--riks-color-accent); }
.riks-servicios__bajada-celeste { color: var(--riks-color-highlight); }

/* Figma: cards de 1442x519 con 75px entre una y otra (nodos 8:173 /
   8:172 / 8:171). Padding interno: el contenido arranca en x=181 sobre
   una card que empieza en x=143 → 38px. */
.riks-servicios__pilares {
	padding-block: 0; display: flex; flex-direction: column;
	gap: calc(75px * var(--riks-fs));
}
.riks-servicio-detalle {
	position: relative;
	min-height: calc(519px * var(--riks-fs));
	padding: calc(65px * var(--riks-fs)) calc(38px * var(--riks-fs));
	border: 2px solid var(--riks-color-accent);
	border-radius: 20px;
	scroll-margin-top: calc(var(--riks-header-height) + 16px);
}
.riks-servicio-detalle--celeste { border-color: var(--riks-color-highlight); }
.riks-servicio-detalle--navy { border-color: var(--riks-color-dark); }
/* Figma: ícono de 120px, a 48px del borde derecho y 32px del superior. */
.riks-servicio-detalle__icon {
	position: absolute;
	top: calc(32px * var(--riks-fs)); right: calc(48px * var(--riks-fs));
	width: calc(120px * var(--riks-fs)); height: calc(120px * var(--riks-fs));
}
/* Figma nodo 5:58: Lexend ExtraBold (800) 55px, uppercase, #1e1e1e. */
.riks-servicio-detalle h2 {
	/* Figma: glifo del título termina en y≈1016, línea en y=1059 → 43px
	   de aire visual, menos ~10px que line-height:1 deja debajo de la
	   base (va en mayúsculas, no hay descendentes). */
	margin: 0 0 calc(43px * var(--riks-fs) - 10px);
	font-family: var(--riks-font-display); font-weight: 800;
	font-size: clamp(1.5rem, 3vw, calc(55px * var(--riks-fs)));
	line-height: 1; text-transform: uppercase; color: var(--riks-color-text);
	max-width: calc(768px * var(--riks-fs));
}
/* Figma nodo 5:59: Montserrat Regular 30px, #3c444f, caja de 1179px.
   Antes estaba en 1.1rem (17.6px) y en gris claro: se veía mucho más
   chico y más lavado que en el Figma. */
.riks-servicio-detalle p {
	margin: 0; color: var(--riks-color-dark);
	font-family: var(--riks-font-base);
	font-size: calc(30px * var(--riks-fs)); line-height: 1.24;
	max-width: calc(1179px * var(--riks-fs));
}
/* Figma nodo 5:63: línea de 347px, entre el título (y=972) y la
   descripción (y=1098), a 87px del top del título. */
.riks-servicio-detalle__divider {
	/* Mauve, igual que las demás líneas divisorias del sitio (muestreado
	   en el render del Figma: antes estaba gris con opacidad). */
	border: none; height: var(--riks-divider-width); background: var(--riks-divider-color);
	/* Figma: línea y=1059, descripción y=1098 → 39px. */
	margin: 0 0 calc(39px * var(--riks-fs));
	width: calc(347px * var(--riks-fs)); max-width: 100%;
}
/* Figma: pills de 55.3px de alto, radio completo, 15px de separación
   en ambos ejes, arrancando 156px debajo del top de la descripción. */
.riks-servicio-detalle__pills {
	list-style: none; margin: calc(45px * var(--riks-fs)) 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: calc(15px * var(--riks-fs));
}
/* Figma nodo 5:81: Lexend Regular (400) 23.433px, blanco, uppercase,
   sobre relleno del color del pilar. Padding horizontal: el texto
   arranca 28.1px después del borde del pill. */
.riks-servicio-detalle__pills li {
	background: var(--riks-color-accent); color: #fff;
	font-family: var(--riks-font-display); font-weight: 400;
	font-size: calc(23.433px * var(--riks-fs)); line-height: 1;
	text-transform: uppercase;
	display: flex; align-items: center;
	min-height: calc(55.302px * var(--riks-fs));
	padding: 0 calc(28.1px * var(--riks-fs));
	border-radius: 999px;
}
.riks-servicio-detalle--celeste .riks-servicio-detalle__pills li { background: var(--riks-color-highlight); }
.riks-servicio-detalle--navy .riks-servicio-detalle__pills li { background: var(--riks-color-dark); }

/* Título centrado sin la línea divisoria (modificador de .riks-section-title-huge).
   Figma nodo 8:169: Montserrat Black 78px, relleno #d9d9d9 con contorno
   oscuro, tracking -6.24px (=-0.08em), uppercase, centrado. */
.riks-section-title-huge--center {
	/* margin-inline:auto explícito: `margin:0` pisaba el auto de .container
	   y el título quedaba pegado al borde izquierdo en vez de centrado. */
	display: block; text-align: center; margin: 0 auto;
	font-family: var(--riks-font-base); font-weight: 900;
	font-size: clamp(2.5rem, 6vw, calc(78px * var(--riks-fs)));
	letter-spacing: -0.08em; text-transform: uppercase; line-height: 1;
	color: var(--riks-color-surface);
	-webkit-text-stroke: var(--riks-stroke-width) var(--riks-color-dark);
	paint-order: stroke fill;
}
.riks-section-title-huge--center::after { display: none; }

/* Figma: la banda gris va de y=2696 a y=3305 (609px de alto), arranca
   82px después de la última card, y el título está 105px adentro. */
.riks-servicios__proceso {
	padding-block: calc(105px * var(--riks-fs)) calc(105px * var(--riks-fs));
	background: var(--riks-color-surface);
	--riks-section-title-fill: var(--riks-color-surface);
	margin-top: calc(82px * var(--riks-fs));
}
/* Reescrito (feedback 2026-08): antes usaba un border-top + margin negativo
   en el círculo para simular la línea "por dentro" de los círculos — quedaba
   desalineado y los círculos terminaban pegados al borde del contenedor. La
   línea ahora es un elemento propio, centrado en el medio vertical exacto de
   los círculos (mitad de 74px = 37px), y todo el bloque tiene su propio
   padding lateral para no llegar al borde. */
/* Recorregido contra el screenshot real del Figma (feedback 2026-08): los
   círculos son chicos y RELLENOS de navy (no huecos con borde), el número va
   en contorno claro sobre el navy, la línea es fina y oscura, y los títulos
   de cada paso van en navy — antes tenía todo al revés (círculo hueco,
   número navy, título negro). Tamaño del círculo en proporción real:
   74px * 0.717 ≈ 53px. */
/* Figma: los centros de los círculos están a 150px del borde del área de
   contenido (293 y 1437 sobre 143..1585), y el título está 137px arriba
   del top de los círculos. */
/* Figma: los centros de los círculos caen a 150px y 1294px del borde del
   área de contenido (1442px). Con 4 columnas iguales los centros quedan
   a 1/8 y 7/8 del ancho, así que el bloque se desborda ~40px por lado
   para que los extremos coincidan con el Figma. */
.riks-servicios__timeline {
	position: relative;
	/* Ancho útil del container (1192px) + 80px de desborde para que los
	   centros de los círculos extremos caigan donde el Figma los pone.
	   Se anula el padding del .container y se centra con margin auto. */
	max-width: calc(var(--riks-container-max) - var(--riks-container-padding) * 2 + 80px * var(--riks-fs));
	padding-inline: 0;
	margin: calc(137px * var(--riks-fs)) auto 0;
}
/* La línea va exactamente de centro a centro del primer y último
   círculo: con 4 columnas iguales eso es 12.5% y 87.5%. Antes tenía
   valores absolutos que la hacían sobresalir de los círculos. */
.riks-servicios__timeline-line {
	position: absolute;
	top: calc(74px * var(--riks-fs) / 2); /* centro vertical del círculo */
	left: 12.5%; right: 12.5%;
	height: 1.5px;
	background: var(--riks-color-dark); z-index: 0;
}
.riks-servicios__pasos {
	position: relative; z-index: 1;
	list-style: none; padding: 0; margin: 0;
	/* column-gap: 0 a propósito — el ancho de las descripciones (325px del
	   Figma) ya deja el aire entre columnas, y con gap los centros de los
	   círculos dejaban de coincidir con los extremos de la línea. */
	display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 0; row-gap: 56px;
	text-align: center;
}
.riks-paso { position: relative; }
/* Figma: círculos de 74px rellenos de navy, con el número en contorno
   claro (nodos 17:266 / 17:265). El número va Montserrat Black 40px. */
.riks-paso__numero {
	display: flex; align-items: center; justify-content: center;
	width: calc(74px * var(--riks-fs)); height: calc(74px * var(--riks-fs));
	margin: 0 auto calc(46px * var(--riks-fs));
	border-radius: 50%; background: var(--riks-color-dark);
	font-family: var(--riks-font-base); font-weight: 900;
	font-size: calc(40px * var(--riks-fs));
	/* Relleno azul + contorno blanco (pedido de Agustina 2026-08-13). Antes
	   el relleno era transparente: se veía casi igual sobre el círculo navy,
	   pero con el relleno explícito el número no "cala" el círculo si en
	   algún momento cambia el fondo. */
	color: var(--riks-color-dark);
	-webkit-text-stroke: var(--riks-stroke-width) #fff; paint-order: stroke fill;
}
/* Figma nodos 8:205 / 17:252: título del paso en navy; descripción en
   caja de 325px, centrada bajo el círculo. */
/* Figma nodo 8:205: Lexend ExtraBold 35px, leading 30px, #3c444f. */
.riks-paso h3 {
	margin: 0 0 calc(32px * var(--riks-fs));
	font-family: var(--riks-font-display); font-weight: 800;
	font-size: calc(35px * var(--riks-fs)); line-height: calc(30 / 35);
	color: var(--riks-color-dark);
}
/* Figma nodo 8:181: Montserrat Regular 20px, leading 20px, #3c444f,
   centrado, en una caja de 325px. */
.riks-paso p {
	margin: 0 auto; color: var(--riks-color-dark);
	font-family: var(--riks-font-base);
	font-size: calc(20px * var(--riks-fs)); line-height: 1;
	max-width: calc(325px * var(--riks-fs));
}
@media (max-width: 900px) {
	.riks-servicios__timeline-line { display: none; }
	.riks-servicios__pasos { grid-template-columns: 1fr; gap: 56px; }
}

/* CTA final de Servicios — mismo patrón que el del Home (título derecha +
   divisor + texto/botón), pero con acento celeste en vez de mauve/whatsapp. */
/* Figma nodo 17:301: bloque de 1102px centrado (x 313→1415), a 109px de
   la banda gris. Columna izquierda 304px (título alineado a la derecha),
   línea vertical mauve de 173px, columna derecha 588px. */
.riks-servicios__cta { padding-block: calc(109px * var(--riks-fs)) calc(96px * var(--riks-fs)); }
.riks-servicios__cta-inner {
	display: grid;
	grid-template-columns: calc(304px * var(--riks-fs)) auto calc(588px * var(--riks-fs));
	gap: calc(85px * var(--riks-fs));
	align-items: start; justify-content: center;
}
/* Figma nodo 17:305: Lexend Black 48px, leading 40px, alineado derecha. */
.riks-servicios__cta-title {
	margin: 0; text-align: right;
	font-family: var(--riks-font-display); font-weight: 900;
	font-size: clamp(1.75rem, 3vw, calc(48px * var(--riks-fs)));
	line-height: calc(40 / 48);
}
/* La línea es MAUVE, no celeste (confirmado en el render del Figma). */
.riks-servicios__cta-divider {
	width: 1.5px; height: calc(173px * var(--riks-fs));
	background: var(--riks-color-accent);
}
/* Figma nodo 17:306: Lexend Medium (500) 38px, leading 40px, alineado a
   la IZQUIERDA — hereda text-align:center de un ancestro si no se anula,
   y tanto el copy como el botón quedaban centrados. */
.riks-servicios__cta-body { text-align: left; }
.riks-servicios__cta-body p {
	/* Figma: el copy termina en y≈3494 y el botón arranca en y=3532. */
	margin: 0 0 calc(38px * var(--riks-fs));
	font-family: var(--riks-font-display); font-weight: 500;
	font-size: clamp(1.1rem, 2.4vw, calc(38px * var(--riks-fs)));
	line-height: calc(40 / 38);
}
.riks-servicios__cta-body .riks-btn--secondary { background: var(--riks-color-highlight); color: #fff; border-color: var(--riks-color-highlight); }
@media (max-width: 900px) {
	.riks-servicios__cta-inner { grid-template-columns: 1fr; text-align: center; }
	.riks-servicios__cta-title { text-align: center; }
	.riks-servicios__cta-divider { width: 100%; height: 1.5px; }
}

/* ============ SOBRE MÍ ============ */
/* Reescrito contra Figma (nodo 17:325, 2026-08): foto circular arriba a la
   derecha, título gigante en gris claro (no outline), video vertical + bio
   en fila (no apilados). */
/* Figma: el eyebrow arranca en y=352, igual que los títulos de las demás
   páginas (148px debajo del header). */
.riks-sobre-mi__hero {
	display: grid; grid-template-columns: 1fr; gap: 40px;
	padding-block: calc(132px * var(--riks-fs)) 0; align-items: start;
}
/* Figma nodo 17:455: Montserrat Black 55px, leading 40px, tracking -4.4px
   (=-0.08em), relleno blanco con contorno oscuro. */
.riks-sobre-mi__eyebrow {
	display: inline-block;
	/* Figma: eyebrow y=352, título y=456 → 104px. */
	margin-bottom: calc(104px * var(--riks-fs) - 45px);
	font-family: var(--riks-font-base); font-weight: 900;
	font-size: calc(55px * var(--riks-fs)); line-height: 1;
	letter-spacing: -0.08em; text-transform: uppercase;
	color: #fff; -webkit-text-stroke: var(--riks-stroke-width) #000; paint-order: stroke fill;
}
/* Figma nodo 24:3: Lexend Black 108px, leading 87.262px, tracking -8.64px
   (=-0.08em), gris #d9d9d9 PLANO (sin contorno). Caja de 745px, que es lo
   que hace que corte "Hola, soy / Agustina Ricur". */
.riks-sobre-mi__title {
	/* Figma: título y=456 (alto 175), bajada y=704.7 → 73.7px. */
	margin: 0 0 calc(73.7px * var(--riks-fs));
	max-width: calc(745px * var(--riks-fs));
	font-family: var(--riks-font-display); font-weight: 900;
	font-size: clamp(2.6rem, 7vw, calc(108px * var(--riks-fs)));
	line-height: calc(87.262 / 108); letter-spacing: -0.08em;
	color: var(--riks-color-surface);
}
/* Figma nodo 24:4: los DOS bloques son Montserrat 48px, leading 43.631px,
   tracking -3.84px (=-0.08em) y del MISMO color #3c444f. Lo único que
   cambia es el peso: Bold (700) el primero, Regular (400) el segundo.
   Antes el segundo estaba en gris claro y en Lexend: los dos eran errores. */
.riks-sobre-mi__bajada-fuerte, .riks-sobre-mi__bajada-resto {
	font-family: var(--riks-font-base);
	font-size: clamp(1.2rem, 3vw, calc(48px * var(--riks-fs)));
	line-height: calc(43.631 / 48); letter-spacing: -0.08em;
	color: var(--riks-color-dark);
	max-width: calc(745px * var(--riks-fs));
}
.riks-sobre-mi__bajada-fuerte { margin: 0; font-weight: 700; }
/* Figma: hay un renglón vacío entero (43.631px de leading) entre los dos. */
.riks-sobre-mi__bajada-resto { margin: calc(43.631px * var(--riks-fs)) 0 0; font-weight: 400; }
.riks-sobre-mi__foto { justify-self: center; }
/* Figma nodo 24:2: círculo de 611px. */
.riks-sobre-mi__foto img {
	width: 100%; max-width: calc(611px * var(--riks-fs));
	aspect-ratio: 1; object-fit: cover; border-radius: 50%;
}

/* align-items: stretch (default) — el video y el bloque de bio deben quedar
   de la misma altura (feedback 2026-08); antes el video tenía aspect-ratio
   fijo 3:4 propio y quedaba más bajo que el texto. Ahora el alto lo define
   el contenido de la bio y el video se estira para igualarlo. */
/* Ajustado (feedback 2026-08): la columna del video era muy ancha y el
   texto le quedaba pegado — se angostó la columna, se agrandó el espacio
   entre columnas, y se sacó el "stretch" forzado (hacía que el video y el
   texto quedaran con alturas distintas a las naturales y dejaba espacios en
   blanco descompensados abajo). Ahora cada uno usa su alto natural,
   alineados arriba. */
/* Figma: la bajada termina en y=923.7 y la fila de abajo arranca en
   y=1013 → 89px. */
.riks-sobre-mi__row {
	display: grid; grid-template-columns: 1fr; gap: 32px;
	padding-block: calc(89px * var(--riks-fs)) calc(74px * var(--riks-fs));
}
/* Figma nodo 26:59: 566x758. */
.riks-sobre-mi__video video {
	width: 100%; aspect-ratio: 566 / 758; object-fit: cover; border-radius: 10px;
}
/* Figma nodo 24:17: Montserrat Regular 30px, tracking -2.4px (=-0.08em),
   #3c444f, en una caja de 721px. Antes estaba en gris claro y con un
   tracking inventado (-0.02em). */
.riks-sobre-mi__bio p {
	margin: 0 0 calc(30px * var(--riks-fs));
	color: var(--riks-color-dark);
	font-family: var(--riks-font-base);
	font-size: clamp(1rem, 2vw, calc(30px * var(--riks-fs)));
	line-height: 1.22; letter-spacing: -0.08em;
}
.riks-sobre-mi__bio p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
	.riks-sobre-mi__hero { grid-template-columns: 1fr auto; }
	.riks-sobre-mi__foto { justify-self: end; }
	/* Figma: imagen de 566px a la izquierda (x=143) y bio de 721px que
	   arranca en x=868 → 159px de separación entre columnas. */
	.riks-sobre-mi__row {
		grid-template-columns: calc(566px * var(--riks-fs)) calc(721px * var(--riks-fs));
		gap: calc(159px * var(--riks-fs));
		align-items: start;
	}
}

/* Figma nodo 24:40: banda de 314px de alto exactos, con los logos
   centrados verticalmente. Se anula el padding propio de
   .riks-client-logos para que no sume por encima de esa altura. */
.riks-sobre-mi__clientes {
	background: var(--riks-color-dark);
	min-height: calc(314px * var(--riks-fs));
	display: flex; align-items: center;
}
.riks-sobre-mi__clientes .riks-client-logos { padding-block: 0; width: 100%; }

/* Figma nodo 24:57: bloque de 1082.5px (x 323→1405.5) a 111px de la banda
   de logos. Título alineado a la derecha, línea vertical mauve de 114px,
   botón celeste. Igual patrón que el CTA de Servicios pero sin párrafo. */
.riks-sobre-mi__cta { padding-block: calc(111px * var(--riks-fs)) calc(117px * var(--riks-fs)); }
.riks-sobre-mi__cta-inner {
	display: grid;
	grid-template-columns: calc(651px * var(--riks-fs)) auto auto;
	gap: calc(98px * var(--riks-fs));
	align-items: center; justify-content: center;
}
/* Figma nodo 24:54: Lexend Black 48px, leading 40px, #1e1e1e, derecha. */
.riks-sobre-mi__cta-title {
	margin: 0; text-align: right;
	font-family: var(--riks-font-display); font-weight: 900;
	font-size: clamp(1.5rem, 3vw, calc(48px * var(--riks-fs)));
	line-height: calc(40 / 48); color: var(--riks-color-text);
}
.riks-sobre-mi__cta-divider {
	width: var(--riks-divider-width); height: calc(114px * var(--riks-fs));
	background: var(--riks-color-accent); flex-shrink: 0;
}
.riks-sobre-mi__cta .riks-btn--secondary { background: var(--riks-color-highlight); color: #fff; border-color: var(--riks-color-highlight); }
@media (max-width: 700px) {
	.riks-sobre-mi__cta-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.riks-sobre-mi__cta-title { text-align: center; }
	.riks-sobre-mi__cta-divider { width: 100%; height: var(--riks-divider-width); }
}

/* ============ CONTACTO ============ */
/* Reescrito contra Figma (nodo 26:60, 2026-08): 2 columnas — form a la
   izquierda con campos en cajas redondeadas con borde, e íconos de contacto
   directo (email/whatsapp/instagram) en una fila corta junto al botón de
   envío; a la derecha un collage de 3 fotos superpuestas con borde blanco. */
/* El padding-top sale de .riks-trabajo__intro (mismo criterio en toda la
   web): el título arranca a 132px del header en todos los frames. */
.riks-contacto__layout {
	display: grid; grid-template-columns: 1fr; gap: 48px;
	/* Figma: el footer arranca en y=1378 y el bloque más bajo (el collage)
	   termina en y=1298 → 80px. */
	padding-top: calc(132px * var(--riks-fs)); padding-bottom: calc(80px * var(--riks-fs));
}
/* Figma nodo 26:112: Lexend SemiBold (600) 48px, leading 45px — exactamente
   la misma tipografía que la bajada de Servicios. Caja de 790px.
   Figma: línea y=460, pregunta y=516 → 56px. */
.riks-contacto__pregunta {
	margin: 0 0 calc(45px * var(--riks-fs));
	font-family: var(--riks-font-display); font-weight: 600;
	font-size: clamp(1.85rem, 4.5vw, calc(48px * var(--riks-fs)));
	line-height: calc(45 / 48);
	max-width: calc(790px * var(--riks-fs));
}
/* Figma nodo 26:113: Lexend Medium (500) 38px, leading 40px, caja de 744px.
   Figma: pregunta termina en y=606, bajada y=651 → 45px; y de la bajada al
   primer campo del form (y=742) hay 51px. */
.riks-contacto__bajada {
	margin: 0 0 calc(51px * var(--riks-fs));
	font-family: var(--riks-font-display); font-weight: 500;
	font-size: clamp(1.4rem, 3vw, calc(38px * var(--riks-fs)));
	line-height: calc(40 / 38);
	max-width: calc(744px * var(--riks-fs));
}

/* Formulario. Figma nodos 26:119..26:122: cajas de 692x75 (la del mensaje
   189 de alto) separadas 14px, que arrancan en x=127 — o sea 16px a la
   izquierda del margen de contenido, con el texto adentro alineado a 143. */
.riks-contact-form { width: 100%; max-width: calc(692px * var(--riks-fs)); margin-left: calc(-16px * var(--riks-fs)); }
.riks-contact-form__field {
	margin-bottom: calc(14px * var(--riks-fs));
	display: flex; align-items: center;
	min-height: calc(75px * var(--riks-fs));
	padding: 0 calc(16px * var(--riks-fs));
	border: 1px solid var(--riks-color-surface); border-radius: 10px;
}
/* Figma nodo 26:118: Lexend Light (300) 35px. El label y el input van en
   la misma línea (el label hace de prefijo, no de etiqueta arriba). */
.riks-contact-form__field label {
	flex-shrink: 0; margin: 0 .5ch 0 0;
	font-family: var(--riks-font-display); font-weight: 300;
	font-size: calc(35px * var(--riks-fs)); line-height: calc(45 / 35);
}
.riks-contact-form__field input, .riks-contact-form__field select, .riks-contact-form__field textarea {
	width: 100%; padding: 0; border: none; outline: none;
	font-family: var(--riks-font-display); font-weight: 300;
	font-size: calc(35px * var(--riks-fs)); background: transparent;
}
/* El campo de mensaje es más alto (189px en el Figma) y el label va arriba. */
.riks-contact-form__field--mensaje {
	display: block; align-items: stretch;
	min-height: calc(189px * var(--riks-fs));
	padding-block: calc(14px * var(--riks-fs));
}
.riks-contact-form__field--mensaje textarea {
	min-height: calc(110px * var(--riks-fs)); resize: vertical;
}
.riks-contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.riks-contact-form__feedback { margin-top: 16px; font-weight: 600; }
.riks-contact-form__submit { background: var(--riks-color-highlight); color: #fff; }

/* Figma nodos 26:129/131/133: glifos sueltos de 60x60 (sin círculo), a 34px
   uno de otro, y el botón de envío a 189px del último ícono. La fila arranca
   43px debajo del último campo. */
.riks-contacto__directo {
	display: flex; align-items: center;
	gap: calc(34px * var(--riks-fs));
	margin-top: calc(43px * var(--riks-fs)); flex-wrap: wrap;
}
.riks-contacto__directo-icon { display: flex; align-items: center; justify-content: center; color: var(--riks-color-dark); }
.riks-contacto__directo-icon svg { width: calc(60px * var(--riks-fs)); height: calc(60px * var(--riks-fs)); }
.riks-contact-form__submit { margin-left: calc(189px * var(--riks-fs) - 34px * var(--riks-fs)); }

/* Collage de fotos — proporciones exactas sacadas del Figma (nodo 26:60),
   escaladas como % dentro de una caja con la misma relación de aspecto que
   el grupo original (796x1047), no posiciones inventadas — antes con top/
   right/bottom aproximados una foto terminaba tapando el ícono flotante de
   WhatsApp o quedando cortada de forma rara. */
.riks-contacto__col-galeria { display: none; }
.riks-contacto__galeria { position: relative; width: 100%; aspect-ratio: 796 / 1047; }
.riks-contacto__galeria-item {
	position: absolute; width: 52.1%; aspect-ratio: 415 / 553;
	border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 4px; overflow: hidden;
}
.riks-contacto__galeria-item img { width: 100%; height: 100%; object-fit: cover; }
/* 1ra foto del campo = arriba-centro; 2da = izquierda-media; 3ra = abajo-derecha. */
.riks-contacto__galeria-item:nth-child(1) { top: 0; left: 34.5%; z-index: 2; }
.riks-contacto__galeria-item:nth-child(2) { top: 37.4%; left: 0; z-index: 1; }
.riks-contacto__galeria-item:nth-child(3) { top: 47.1%; left: 47.9%; z-index: 3; }

@media (min-width: 1100px) {
	/* Figma: la columna del form mide 692px (x 127..819) y el collage 796px
	   (x 890..1686), con 71px entre las dos. El collage se desborda a
	   propósito del margen de contenido por la derecha, igual que en el
	   Figma. */
	.riks-contacto__layout {
		grid-template-columns: calc(692px * var(--riks-fs)) calc(796px * var(--riks-fs));
		gap: calc(71px * var(--riks-fs));
		align-items: start;
	}
	/* El collage arranca en y=251, o sea 101px MÁS ARRIBA que el título
	   (y=352) — sube por encima del padding-top de la sección. */
	.riks-contacto__col-galeria { display: block; margin-top: calc(-101px * var(--riks-fs)); }
}

/* ============================================================
   MOBILE
   ============================================================
   El Figma sólo tiene frames de escritorio (1728px), así que acá
   no hay medidas que copiar: el criterio es conservar la jerarquía
   y el ritmo del diseño, y resolver las estructuras de varias
   columnas apilándolas.

   Regla general: nada de anchos fijos en px por debajo de 900px —
   son los que meten scroll horizontal, que en un teléfono es el
   defecto más molesto de todos.
   ============================================================ */

@media (max-width: 900px) {
	/* Los items de grilla toman su min-content como mínimo, así que un
	   hijo con ancho fijo estira la columna entera y desborda la
	   pantalla. min-width:0 corta esa cadena en todas las grillas. */
	.riks-contacto__layout > *,
	.riks-proyecto__cuerpo > *,
	.riks-proyecto__marca > *,
	.riks-featured-metricas__grid > *,
	.riks-featured-etapas__row > *,
	.riks-sobre-mi__row > *,
	.riks-sobre-mi__hero > * { min-width: 0; }

	/* ---- Cabecera de página (Trabajo / Servicios / Contacto) ---- */
	/* El título va de 108px a algo que entre en 390px sin cortarse. */
	.riks-trabajo__intro { padding-top: calc(90px * var(--riks-fs)); }
	.riks-trabajo__title { font-size: clamp(2.5rem, 13vw, 4rem); }
	.riks-trabajo__subtitle,
	.riks-servicios__bajada,
	.riks-contacto__pregunta { max-width: 100%; }

	/* ---- Botones ---- */
	/* min-width de 195px + padding no entra de a dos por fila en 390px. */
	.riks-btn { min-width: 0; padding-inline: 24px; }
	.riks-hero__ctas .riks-btn { min-width: 0; flex: 1 1 auto; }

	/* ---- Cards de servicio ---- */
	/* El ícono está posicionado sobre la esquina y con el título en dos
	   renglones se le encimaba: en mobile pasa a ser un elemento más
	   del flujo, arriba del título. */
	.riks-servicio-detalle { min-height: 0; padding: 32px 24px; }
	.riks-servicio-detalle__icon {
		position: static; width: 56px; height: 56px;
		margin-bottom: 20px;
	}
	.riks-servicio-detalle h2 { max-width: 100%; margin-bottom: 16px; }
	.riks-servicio-detalle p { max-width: 100%; }
	.riks-servicio-detalle__pills { margin-top: 28px; gap: 8px; }
	.riks-servicio-detalle__pills li { font-size: .8rem; min-height: 36px; padding: 0 16px; }

	/* ---- Pastilla "destacado" ---- */
	/* 217px de ancho mínimo tapaba media card. */
	.riks-project-card__badge {
		min-width: 0; min-height: 0; font-size: .7rem;
		padding: 6px 14px; top: 12px; right: 12px; letter-spacing: .08em;
	}
	.riks-project-card__name { left: 20px; bottom: 20px; font-size: 1.15rem; }

	/* ---- Contacto ---- */
	.riks-contacto__layout { padding-top: calc(90px * var(--riks-fs)); }
	.riks-contact-form { margin-left: 0; }
	.riks-contact-form__field { padding: 0 16px; min-height: 56px; }
	.riks-contact-form__field label,
	.riks-contact-form__field input,
	.riks-contact-form__field select,
	.riks-contact-form__field textarea { font-size: 1rem; }
	.riks-contact-form__field--mensaje { min-height: 140px; }
	/* Los íconos y el botón dejan de compartir fila: el botón queda a lo
	   ancho, que es lo cómodo para tocar con el pulgar. */
	.riks-contacto__directo { gap: 20px; flex-wrap: wrap; }
	.riks-contacto__directo-icon svg { width: 34px; height: 34px; }
	.riks-contact-form__submit { margin-left: 0; width: 100%; margin-top: 8px; }

	/* ---- Páginas de proyecto ---- */
	.riks-proyecto__hero { min-height: calc(420px * var(--riks-fs)); }
	.riks-proyecto__title { font-size: clamp(2rem, 11vw, 3.5rem); }
	.riks-proyecto__hero-line { width: 100%; }
	.riks-proyecto__cuerpo { padding-top: 48px; gap: 32px; }
	.riks-proyecto__iconos { gap: 20px; padding-block: 40px; justify-content: center; }
	.riks-proyecto__icono { height: 56px; }
	.riks-proyecto__marca { padding-block: 32px; }
	.riks-proyecto__marca-visual { gap: 32px; }
	.riks-proyecto__paleta li { width: 56px; height: 56px; }
	.riks-proyecto__mockups { margin-top: 48px; }
	.riks-proyecto__nav { padding-block: 48px 32px; gap: 20px; justify-content: center; }
	.riks-proyecto__nav-link--prev,
	.riks-proyecto__nav-link--next { min-width: 130px; min-height: 46px; }

	/* ---- Featured (IES) ---- */
	.riks-featured-metricas__item { min-height: 0; padding: 28px 24px; }
	.riks-featured-metricas__linea { margin-block: 20px 14px; }
	.riks-featured-proyecto { padding-top: 48px; gap: 32px; }
	.riks-featured-proyecto__logo { max-width: 180px; }
	.riks-featured-etapas__row { gap: 24px; }
	.riks-featured-etapa { padding: 24px 20px; }
	.riks-featured-medios { padding: 40px 24px; gap: 40px; }
	.riks-featured-cierre { padding-top: 40px; }

	/* ---- Sobre Mí ---- */
	.riks-sobre-mi__hero { padding-top: calc(90px * var(--riks-fs)); }
	.riks-sobre-mi__foto { justify-self: start; }
	.riks-sobre-mi__title,
	.riks-sobre-mi__bajada-fuerte,
	.riks-sobre-mi__bajada-resto { max-width: 100%; }
	.riks-sobre-mi__clientes { min-height: 0; padding-block: 40px; }

	/* ---- Títulos de sección ("TRABAJOS RECIENTES", "SERVICIOS") ---- */
	/* Van con white-space:nowrap y un margen negativo de -43px para
	   desbordar por izquierda como en el Figma; a 390px eso se iba 19px
	   fuera de pantalla. Se saca el margen y se achica la tipografía para
	   que el renglón entre entero, que es lo que le da carácter. */
	.riks-section-title-huge {
		margin-left: 0; gap: 16px;
		font-size: clamp(1.5rem, 8vw, 3rem);
	}
	.riks-section-title-huge::after { min-width: 0; }

	/* ---- Grilla de proyectos del Home ---- */
	/* Se había quedado en 3 columnas fijas: cards de 89px de ancho, con el
	   texto del hover desbordando la pantalla. */
	.riks-featured-projects .riks-project-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.riks-featured-projects { padding-block: 56px; }
	/* El texto del hover no aplica en pantallas táctiles (no hay hover), así
	   que se oculta: el nombre del proyecto ya está siempre visible. */
	.riks-project-card__hover, .riks-project-card__hover-veil { display: none; }

	/* ---- Barra de logos ---- */
	/* Se frena el carrusel: en mobile el movimiento constante molesta
	   más de lo que aporta, y se puede arrastrar con el dedo. */
	.riks-client-logos__track { animation: none; }
	.riks-client-logos { overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* ---- Selector de idioma dentro del menú mobile ---- */
	.riks-mobile-menu__lang { margin: 28px 0 4px; }
	/* El panel desplegable no tiene sentido acá: se muestran los idiomas
	   como una fila de opciones, que es un toque menos. */
	.riks-mobile-menu__lang .riks-lang-switch__current { display: none; }
	.riks-mobile-menu__lang .riks-lang-switch__panel {
		display: flex !important; gap: 12px;
		position: static; border: none; background: none; padding: 0; box-shadow: none;
	}
	.riks-mobile-menu__lang .riks-lang-switch__panel a {
		border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
		padding: 8px 18px; color: #fff;
	}

	/* ---- Botón flotante de WhatsApp ---- */
	/* Está fijo abajo a la derecha y en mobile se le montaba encima al
	   copyright del footer. Se le da al footer aire suficiente por debajo
	   para que el botón nunca tape texto. */
	.riks-whatsapp-float { bottom: 16px; right: 16px; width: 52px; height: 52px; }
	.riks-footer { padding-bottom: 84px; }

	/* ---- Timeline de "cómo trabajo" ---- */
	.riks-servicios__timeline { margin-inline: 0; max-width: 100%; }
	.riks-servicios__cta-inner,
	.riks-sobre-mi__cta-inner,
	.riks-featured-cta__inner { gap: 24px; }
}

@media (max-width: 600px) {
	/* El collage y la grilla de fotos pasan a una sola columna: con dos,
	   cada foto queda demasiado chica para que se lea algo. */
	.riks-proyecto--featured .riks-proyecto__galeria-grid--masonry { grid-template-columns: 1fr; }
	.riks-proyecto--featured .riks-proyecto__galeria-item,
	.riks-proyecto--featured .riks-proyecto__galeria-item--video { grid-column: span 1; grid-row: span 1; }

	.riks-featured-projects .riks-project-grid { grid-template-columns: 1fr; }
	.riks-proyecto__mockups { grid-template-columns: 1fr; }
	.riks-featured-cta__title,
	.riks-servicios__cta-title,
	.riks-sobre-mi__cta-title { text-align: center; }
}

/* ============ REVIEW DEL CLIENTE (pie de proyecto) ============ */
/* No sale de ningún nodo del Figma: es un bloque nuevo, armado con los
   elementos que ya usa el sitio — banda gris #d9d9d9 como la de "Cómo
   trabajo", Lexend para la cita y el mauve de acento en la comilla y en
   la firma. Centrado y con mucho aire para que corte el ritmo de la
   página y se lea como un cierre. */
.riks-review {
	background: var(--riks-color-surface);
	padding-block: calc(120px * var(--riks-fs));
	margin-top: calc(100px * var(--riks-fs));
}
.riks-review__inner {
	max-width: calc(1100px * var(--riks-fs));
	margin: 0 auto; text-align: center;
	display: flex; flex-direction: column; align-items: center;
}
/* Comilla decorativa grande. line-height chico + margen negativo para que
   se apoye sobre la cita en vez de empujarla hacia abajo. */
.riks-review__comilla {
	font-family: var(--riks-font-display); font-weight: 900;
	font-size: calc(160px * var(--riks-fs)); line-height: .6;
	color: var(--riks-color-accent);
	margin-bottom: calc(12px * var(--riks-fs));
}
.riks-review__texto {
	margin: 0;
	font-family: var(--riks-font-display); font-weight: 500;
	font-size: clamp(1.2rem, 2.6vw, calc(38px * var(--riks-fs)));
	line-height: 1.3; color: var(--riks-color-text);
	text-wrap: balance;
}
.riks-review__firma {
	margin-top: calc(48px * var(--riks-fs));
	display: flex; flex-direction: column; gap: 4px;
}
.riks-review__autor {
	font-family: var(--riks-font-base); font-weight: 700;
	font-size: calc(24px * var(--riks-fs));
	text-transform: uppercase; letter-spacing: .08em;
	color: var(--riks-color-dark);
}
.riks-review__cargo {
	font-family: var(--riks-font-base); font-weight: 400;
	font-size: calc(22px * var(--riks-fs));
	color: var(--riks-color-dark); opacity: .75;
}
@media (max-width: 900px) {
	.riks-review { padding-block: 64px; margin-top: 56px; }
	.riks-review__comilla { font-size: 88px; }
	.riks-review__firma { margin-top: 28px; }
	.riks-review__autor { font-size: 1rem; }
	.riks-review__cargo { font-size: .95rem; }
}

/* Link a la reseña original. Va discreto —lo importante es la cita, no el
   link— pero visible: es lo que deja verificar que el testimonio existe. */
.riks-review__fuente {
	margin-top: calc(18px * var(--riks-fs));
	font-family: var(--riks-font-base); font-weight: 600;
	font-size: calc(20px * var(--riks-fs));
	color: var(--riks-color-accent);
	border-bottom: 1px solid currentColor;
	align-self: center;
	transition: opacity .2s ease;
}
.riks-review__fuente:hover { opacity: .7; }
@media (max-width: 900px) {
	.riks-review__fuente { font-size: .9rem; margin-top: 16px; }
}

/* ============ RESEÑAS EN EL HOME ============ */
/* Versión contenida del bloque de review: acá es un apoyo antes del CTA,
   no la pieza principal, así que va sobre blanco, más chico y sin la
   comilla gigante. Las citas se apilan una encima de otra y sólo cambia
   la opacidad, para que el alto no salte al rotar. */
.riks-home-reviews { padding-block: calc(110px * var(--riks-fs)) 0; }
.riks-home-reviews__inner {
	position: relative;
	max-width: calc(900px * var(--riks-fs));
	margin-inline: auto; text-align: center;
	display: grid; /* todas las citas en la misma celda */
}
.riks-home-review {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0; visibility: hidden;
	transition: opacity .7s ease;
}
.riks-home-review.is-active { opacity: 1; visibility: visible; }
.riks-home-review__texto {
	margin: 0;
	font-family: var(--riks-font-display); font-weight: 500;
	font-size: clamp(1.05rem, 2vw, calc(30px * var(--riks-fs)));
	line-height: 1.4; color: var(--riks-color-text);
	text-wrap: balance;
}
/* Comillas tipográficas puestas por CSS: el texto se guarda limpio, sin
   que Agustina tenga que acordarse de escribirlas. */
.riks-home-review__texto::before { content: '\201C'; }
.riks-home-review__texto::after  { content: '\201D'; }
.riks-home-review__firma {
	margin-top: calc(28px * var(--riks-fs));
	display: flex; flex-wrap: wrap; justify-content: center;
	align-items: baseline; gap: 4px 10px;
	font-family: var(--riks-font-base);
	font-size: calc(19px * var(--riks-fs));
}
.riks-home-review__autor { font-weight: 700; color: var(--riks-color-dark); }
.riks-home-review__cargo { color: var(--riks-color-dark); opacity: .7; }
/* La fuente va como un dato más de la firma, no como un botón. */
.riks-home-review__fuente {
	color: var(--riks-color-accent);
	border-bottom: 1px solid currentColor;
}
.riks-home-review__fuente::before { content: '· '; border: none; }
.riks-home-reviews__puntos {
	grid-area: 2 / 1;
	margin-top: calc(40px * var(--riks-fs));
	display: flex; justify-content: center; gap: 10px;
}
.riks-home-reviews__punto {
	width: 8px; height: 8px; padding: 0;
	border: none; border-radius: 50%; cursor: pointer;
	background: var(--riks-color-dark); opacity: .25;
	transition: opacity .3s ease, background .3s ease;
}
.riks-home-reviews__punto.is-active { background: var(--riks-color-accent); opacity: 1; }
.riks-home-reviews__punto:hover { opacity: .6; }
.riks-home-reviews__punto.is-active:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	/* Sin animación: se muestran todas una debajo de otra y no rota nada. */
	.riks-home-reviews__inner { display: block; }
	.riks-home-review { opacity: 1; visibility: visible; transition: none; }
	.riks-home-review + .riks-home-review { margin-top: 48px; }
	.riks-home-reviews__puntos { display: none; }
}
@media (max-width: 900px) {
	.riks-home-reviews { padding-block: 64px 0; }
	.riks-home-review__firma { margin-top: 20px; font-size: .9rem; }
	.riks-home-reviews__puntos { margin-top: 28px; }
}

/* Link a la política de privacidad en el footer: deliberadamente discreto,
   en la misma línea del copyright. Tiene que estar (el formulario recoge
   datos personales) pero no compite con la navegación. */
.riks-footer__priv {
	margin-left: 10px;
	opacity: .65;
	border-bottom: 1px solid currentColor;
	transition: opacity .2s ease;
}
.riks-footer__priv:hover { opacity: 1; }