/*!
Theme Name: Hazlo Muy Wonder
Theme URI: https://wonderstudio.cl/
Author: Wonder Studio
Author URI: https://wonderstudio.cl/
Description: Theme a medida para el landing de Hazlo Muy Wonder (HMW) — marca de contenido y marketing de ejecución rápida. Shader de gradiente animado, header con blur progresivo, selector de servicios interactivo, carrusel de reels y cumplimiento Ley 21.719. Contenido editable vía ACF con defaults de lanzamiento.
Version: 0.11.6
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hmw
Tags: custom-theme, landing-page, one-page

Única hoja de estilo propia del frontend. Organizada por secciones "== NN ==".

FUENTE DE VERDAD: el archivo de Figma HZM26 (node 1:4), maqueta desktop de 1280px.
Todas las medidas de esta hoja salen de ahí. El Figma NO documenta interacciones
ni efectos: esos vienen del brief y de la referencia midu.design (ver sección 03).
*/

/* ==========================================================================
   00 — FUENTES (auto-alojadas; NO Google Fonts CDN por privacidad, ver README)
   ========================================================================== */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/poppins-light.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/poppins-regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/poppins-medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/poppins-bold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/poppins-black.woff2") format("woff2"); }

/* Exo — SOLO para el wordmark del header (pedido explícito, v0.10.0; revierte
   la decisión de brief que había descartado Exo — ver §05 más abajo). Archivos
   generados a partir de la variable font que subió la clienta
   (Exo-VariableFont_wght.ttf, eje wght 100-900): se instanciaron las
   estáticas en 300 y 700 y se subsetearon a latino, mismo criterio que
   Poppins. SIL Open Font License, auto-alojable sin problema de Ley 21.719. */
@font-face { font-family: "Exo"; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/exo-light.woff2") format("woff2"); }
@font-face { font-family: "Exo"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/exo-bold.woff2") format("woff2"); }

/* ==========================================================================
   01 — TOKENS
   ========================================================================== */
:root {
	/* --- Color: medido en Figma HZM26 (node 1:4), no son placeholder --- */
	--hmw-bg: #000000;
	--hmw-accent: #FF0051;          /* plano del hero (1:7), al 90% de opacidad */
	--hmw-accent-blur: #DB094E;     /* glow del bloque de equipo (1:5), blur 32px */
	--hmw-panel: #1F1F1F;           /* paneles de servicio y tarjetas de reel */
	--hmw-text: #FFFFFF;
	--hmw-text-inactive: #4B4A4A;   /* números y nombres de servicio no activos */
	--hmw-highlight-lime: #D2F962;  /* única palabra destacada del kicker */

	/* Los wordmarks NO son del color de acento: el brief decía #FF0051, pero en
	   Figma el del hero es #F96265 (1:14) y el del footer #E4155A (1:67). Son
	   tonos distintos porque van en mix-blend-mode: plus-lighter sobre fondos
	   distintos — igualarlos al acento apaga el efecto. Manda el Figma. */
	--hmw-wordmark-footer: #E4155A;

	/* Rosa REAL de hero-bg.jpg, muestreado del propio archivo (promedio de la
	   banda superior, para saltarse el grano). NO es el color de marca: el
	   acento es #FF0051 y la imagen resuelve en #F02969, porque trae el 90% de
	   opacidad del Figma ya aplicado sobre negro más el grano encima.
	   Se usa para rellenar donde la imagen no llega (viewports más angostos que
	   el artboard). Si se rellenara con --hmw-accent se vería la costura.
	   Si algún día se re-exporta la imagen, hay que volver a muestrear esto. */
	--hmw-hero-fill: #F02969;

	/* --- Tipografía --- */
	--hmw-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Adobe Caslon Pro requiere licencia del cliente y todavía no está resuelta
	   (ver assets/fonts/README.md). Hasta entonces cae a la serif itálica del
	   sistema, que es lo más cercano en color de texto. */
	--hmw-font-serif: "Adobe Caslon Pro", "Big Caslon", "Hoefler Text", Garamond, Georgia, serif;
	/* Exo, solo para el wordmark del header — el resto de la UI sigue en
	   --hmw-font (Poppins). Cae a Poppins como fallback si Exo no cargara. */
	--hmw-font-wordmark: "Exo", var(--hmw-font);

	/* --- Layout: anchos reales del Figma --- */
	--hmw-stage: 1280px;   /* ancho del artboard */
	--hmw-gutter: 53px;    /* x del panel de servicios (1:51) */

	/* --- Motion --- */
	--hmw-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   02 — RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--hmw-bg);
	color: var(--hmw-text);
	font-family: var(--hmw-font);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

img, video, canvas { display: block; max-width: 100%; }
p { margin: 0; }

/* Un solo estilo de foco visible en todo el theme (WCAG AA, ver README). */
:where(a, button, input, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--hmw-highlight-lime);
	outline-offset: 3px;
	border-radius: 4px;
}

.hmw-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--hmw-text);
	color: var(--hmw-bg);
	font-size: 14px;
	text-decoration: none;
}
.hmw-skip-link:focus { left: 8px; top: 8px; }

/* Centra una tira de contenido sobre el ancho del artboard. */
.hmw-container {
	width: 100%;
	max-width: var(--hmw-stage);
	margin-inline: auto;
	padding-inline: var(--hmw-gutter);
}

/* Sólo para lectores de pantalla (patrón estándar de WordPress). */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   04 — BOTONES

   Píldora de 34px de alto y borde blanco de 1px (Figma 1:10, 1:65, 1:85).
   El ancho lo fija el contenido; en Figma son 137px ("COMENZAR") y 196px
   ("COMENZAR AHORA"), que es lo que da el padding de 26px.
   ========================================================================== */
.hmw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding-inline: 26px;
	border: 1px solid var(--hmw-text);
	border-radius: 20px;
	background: transparent;
	color: var(--hmw-text);
	font-family: var(--hmw-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 0.9;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	/* El transform va aparte y más rápido (0.2s ease-out, sin la curva del resto):
	   lo mueve el magnetismo de app.js en cada pointermove, y una transición larga
	   se sentiría con retraso respecto al cursor. background/color sí usan la curva
	   de marca porque son un solo salto, no un seguimiento continuo. */
	transition: background-color 0.3s var(--hmw-ease), color 0.3s var(--hmw-ease), transform 0.2s ease-out;
}
.hmw-btn:hover { background: var(--hmw-text); color: var(--hmw-bg); }

/* ==========================================================================
   05 — HEADER

   Figma (1:8): banda de rgba(0,0,0,0.15) de 87px sobre el hero. El blur
   progresivo que llevaba se quitó: sus capas de backdrop-filter se pintaban
   encima del propio contenido del header (wordmark + botón) y lo desenfocaban.
   ========================================================================== */
.hmw-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 50;
	height: 87px;
}

/* Barra de administrador de WordPress: es fixed en top:0 con z-index 99999, o
   sea SIEMPRE por encima del header (z-index 50). Sin este offset, para un
   usuario logueado la admin bar tapa el header — el visitante público no la
   tiene y no ve el problema, por eso solo se nota en admin. WP agrega la clase
   .admin-bar al <body> cuando la barra está visible. 32px es su alto normal;
   46px cuando el viewport baja de 782px (ahí WP la agranda). Se usa el mismo
   z-index alto que la barra para que el header quede pegado justo debajo. */
.admin-bar .hmw-header {
	inset-block-start: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .hmw-header {
		inset-block-start: 46px;
	}
}

/* Velo base del Figma (0.15 = pensado para el hero, rosa y con poco detrás).
   .is-scrolled (app.js, módulo headerSolid) lo sube a 0.80 al pasar los
   100vh — el punto en que el hero queda completamente tapado por la
   sección 2 y el header empieza a estar sobre contenido "genérico". */
.hmw-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.15);
	pointer-events: none;
	transition: background-color 0.3s var(--hmw-ease);
}
.hmw-header.is-scrolled::before {
	background: rgba(0, 0, 0, 0.80);
}

.hmw-header__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	margin-inline: auto;
	padding: 0 50px;
}

.hmw-header__brand { text-decoration: none; color: inherit; }

/* "#hazlomuywonder" — 25px, uppercase (1:12).
   v0.10.0: se revirtió la decisión de brief que había descartado Exo (era
   Exo SemiBold en el Figma original) — pedido explícito, dos pesos: "#HAZLO"
   en light y "MUYWONDER" en bold. Dos spans, no un solo font-weight, porque
   son dos pesos DISTINTOS en la misma palabra — un solo peso no alcanza. */
.hmw-wordmark-hash {
	display: inline-flex;
	font-family: var(--hmw-font-wordmark);
	font-size: 25px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0;
}
.hmw-wordmark-hash__light { font-weight: 300; }
.hmw-wordmark-hash__bold { font-weight: 700; }

.hmw-header__actions { display: flex; align-items: center; gap: 12px; }

/* ==========================================================================
   07 — LOADER  ("Hazlo." → "Muy Wonder", sin barra de progreso)
   ========================================================================== */
.hmw-loader {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	background: var(--hmw-bg);
	/* 0.35s, no 0.6s: mientras esto no termina de desvanecerse, la pantalla
	   sigue tapada — el kicker puede estar tipeando de fondo, pero no se ve
	   nada hasta que el loader se va. Ese medio segundo extra era la parte
	   más pesada de "cuánto se demora en aparecer el texto". */
	transition: opacity 0.35s var(--hmw-ease), visibility 0.35s;
}
/* Los nombres de estado los fija app.js: .is-revealed completa "Muy Wonder" y
   .is-hidden desvanece la pantalla. */
.hmw-loader.is-hidden { opacity: 0; visibility: hidden; }
.hmw-loader__word { font-size: clamp(32px, 6vw, 64px); font-weight: 900; }
.hmw-loader__rest {
	opacity: 0;
	/* 0.15s + 0.05s de delay (antes 0.5s + 0.3s = 800ms): el loader ahora puede
	   empezar a irse a los 80ms (ver app.js) — si "Muy Wonder" tardara 800ms en
	   aparecer completo, el loader se desvanecería a mitad de esa revelación y
	   se vería cortada. Con esto la frase completa alcanza a mostrarse antes. */
	transition: opacity 0.15s var(--hmw-ease) 0.05s;
}
.hmw-loader.is-revealed .hmw-loader__rest { opacity: 1; }

/* ==========================================================================
   08 — HERO

   El fondo es UNA IMAGEN (assets/img/hero-bg.jpg), entregada por la clienta.
   Trae el rosa, el wordmark "WONDER" y el grano ya quemados dentro, así que
   este theme NO los compone por CSS: no hay plano de color, ni texto de
   wordmark, ni capa de grano. Mide 1920x1128, exactamente 1.5x el área rosa
   del Figma (1280x752, misma proporción 1.70), o sea encaja con cover sin
   deformarse.

   Capas, de atrás hacia adelante:
     1. imagen de fondo, 752px de alto              (hero-bg.jpg)
     2. elipse negra difuminada que funde a negro   (Figma 1:15)
     3. texto                                       (Figma 1:13, 1:16, 1:17)

   OJO: el shader animado del brief §5 NO está activo. La imagen es estática y
   pintar el shader encima la taparía. shader.js sigue en el repo, sin usar.
   ========================================================================== */
/* El hero es la "sección 1" ANCLADA: se queda fija arriba mientras la pila de
   secciones (.hmw-stack) sube con el scroll y lo tapa. sticky + top:0 lo pinea;
   z-index 0 lo deja DEBAJO de la pila (que va en z-index 1, opaca). height 100vh
   para que ocupe exactamente el primer viewport. */
.hmw-hero {
	position: sticky;
	top: 0;
	z-index: 0;
	height: 100vh;
	height: 100dvh;
	isolation: isolate;
	overflow: clip;
}

/* La pila de secciones scrollea SOBRE el hero. Fondo opaco = tapa el rosa al
   subir (si fuera transparente, el hero anclado se vería a través). z-index 1 la
   pone por encima del hero (z-index 0). */
.hmw-stack {
	position: relative;
	z-index: 1;
	background: var(--hmw-bg);
}

.hmw-hero__bg {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	/* El hero ocupa la altura del viewport, no los 752px del artboard: el Figma
	   es una maqueta de alto fijo, pero en pantalla el hero llena la ventana.
	   dvh y no vh: en móvil, vh cuenta la barra de direcciones del navegador
	   como si no existiera, y el fondo queda cortado al hacer scroll. */
	height: 100vh;
	height: 100dvh;
	z-index: -3;
	overflow: hidden;

	/* El color hace dos cosas: es el fallback si el JPG no carga (el hero queda
	   rosa y el texto blanco se sigue leyendo, en vez de caer sobre negro) y es
	   el relleno donde la imagen no llega en viewports angostos. Por eso es el
	   rosa de la imagen y no el de marca. NO lleva opacity: el 90% del Figma ya
	   viene aplicado dentro del JPG. */
	background-color: var(--hmw-hero-fill);
	/* Fallback puro-CSS: hero.php SIEMPRE pisa esto con un inline style (ACF,
	   campo hero_bg, con este mismo JPG como default si no hay nada cargado)
	   — pero se deja declarado igual acá por si ese echo llegara a fallar. */
	background-image: url("assets/img/hero-bg.jpg");
	background-repeat: no-repeat;
	background-position: center top;

	/* A 1280 (el ancho del artboard) cover calza exacto y no recorta nada: la
	   imagen es 1920x1128 y el área del hero 1280x752 — misma proporción 1.70.
	   Cover solo empieza a recortar por encima de ese ancho, que el Figma no
	   documenta. Debajo de 1280 se cambia de estrategia (ver § 18). */
	background-size: cover;
}

/* Fundido a negro sobre la imagen (lo pinta shader.js — ver § 08).

   Cubre el mismo alto que el fondo y va justo encima: el shader escribe negro
   con alfa variable, así que la parte de arriba queda transparente (se ve la
   imagen) y abajo llega a negro pleno, empalmando con el fondo de la página.

   El degradado CSS es el RESPALDO, no la capa principal: se ve tal cual si WebGL
   falla o el JS no corre. Es recto en vez de orgánico, pero evita el corte duro.
   El canvas lo tapa cuando arranca. */
.hmw-hero__fade {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	width: 100%;
	/* Mismo alto que el fondo: el fundido tiene que terminar exactamente donde
	   termina la imagen, o queda un corte visible. */
	height: 100vh;
	height: 100dvh;
	z-index: -2;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 45%, #000 92%);
}
/* shader.js pone .is-live cuando logró compilar y linkear: recién ahí se apaga
   el respaldo. Si algo falla antes, la clase no se pone y el degradado queda. */
.hmw-hero__fade.is-live { background: none; }

/* El wordmark "WONDER" del hero (Figma 1:14) ya NO se compone por CSS: viene
   quemado dentro de hero-bg.jpg. De paso resuelve que Poppins Black no calzaba
   con el Gilroy del Figma — medía 1625px contra los 1716px del diseño.
   El wordmark del FOOTER sí sigue siendo texto real (ver § 15). */

/* El primer viewport lleva SOLO el kicker. Ocupa 100vh exactos para que el
   título quede fuera del fold: el min-height es lo que empuja al bloque
   siguiente abajo del pliegue.

   El padding-top va aquí y no como margin en el kicker: un margin se colapsa
   hacia fuera de .hmw-hero y empuja la sección entera, dejando el fondo del
   hero 231px más abajo de donde va. */
.hmw-hero__content {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	padding-block-start: 231px;
	text-align: center;
}

/* Sección 2 (esencia): título + sub + reels. Es la primera capa de la pila que
   sube y tapa el hero. El padding-top la separa del header al asentarse. */
.hmw-esencia {
	position: relative;
	text-align: center;
	padding-block-start: 200px;
}
.hmw-esencia__intro { text-align: center; }

/* Kicker (1:13 decía 34px; a 38px por pedido explícito — deviación de Figma
   documentada acá, no un error de medición).

   ENTRADA (v0.6.0): tipeo carácter a carácter en "No solo buscamos viralidad.
   Buscamos que te" (con cursor parpadeante), y al terminar, "tomen en serio"
   dibuja su subrayado de izquierda a derecha. Arranca cuando el loader se va
   (app.js escucha el evento hmw:loaderHidden), nunca antes ni AL MISMO TIEMPO
   — eso fue el bug de una versión anterior (v0.4-0.5): un fade simple que
   arrancaba junto con el fade del loader se tapaba con él y no se notaba.

   Dos gatillos independientes, mismo patrón de seguridad que .hmw-reveal-on /
   .hmw-split-on: .hmw-type-on y .hmw-underline-on los pone el PROPIO módulo
   heroKicker de app.js, cada uno sólo después de confirmar que el elemento
   correspondiente existe. Si app.js no corre, ninguna clase se pone y el
   texto/subrayado se ven completos y estáticos desde el principio — nunca
   invisibles. Por eso funciona bien en _preview.html también (que no carga
   app.js): se ve el resultado final, sin animar. */
.hmw-hero__kicker {
	/* Fluido, no fijo: a 38px la frase completa no entra en el ancho del
	   contenedor (1280px con márgenes) y rompe a 2 líneas — se ve mal Y además
	   el tipeo salta raro al cruzar el quiebre. 34px sí entra (era el tamaño
	   antes de subirlo a 38px); el clamp() lo calibra para que llegue exacto a
	   34px alrededor de los 1280px de viewport y se achique en proporción por
	   debajo de eso, así queda en una sola línea en todo el rango de escritorio
	   sin necesidad de otro breakpoint. Si en algún momento se prefiere 38px
	   fijo por sobre la garantía de una sola línea, el contenedor tendría que
	   ensancharse — es otra decisión, no un ajuste de este mismo valor. */
	font-size: clamp(24px, 2.7vw, 38px);
	font-weight: 400;
	line-height: 1.1;
	white-space: nowrap;
}

/* --- Tipeo: cada carácter es un <span class="hmw-type-char"> (ver app.js).
   Opacidad, no width/clip: con caracteres de ancho variable (incluye el
   nombre propio "viralidad" en otra tipografía de color) un corte por ancho
   se ve tembloroso; opacidad con transición casi instantánea (0.05s, no la
   curva --hmw-ease de los movimientos grandes) da el mismo golpe seco de
   una máquina de escribir sin ese temblor. */
.hmw-type-on .hmw-type-char { opacity: 0; }
.hmw-type-char { transition: opacity 0.04s linear; }
/* OJO: is-typing se agrega al arrancar y NUNCA se saca (ver app.js) — es lo
   que mantiene el texto visible. Si esta regla se gatillara con una clase que
   se remueve al terminar de tipear, el texto entero volvería a opacity:0 en
   cuanto se sacara esa clase (el bug real que tenía esto: el texto
   "desaparecía" apenas terminaba de tipearse). */
.hmw-hero__kicker-type.is-typing .hmw-type-char { opacity: 1; }

/* Cursor: una barra que parpadea SOLO mientras se está tipeando. .is-done es
   una clase APARTE (se agrega sin sacar .is-typing) solo para apagar el
   cursor sin afectar el texto — antes ambas cosas dependían de la misma
   clase y apagar el cursor apagaba el texto con él. */
.hmw-hero__kicker-type::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 0.85em;
	margin-inline-start: 2px;
	background: currentColor;
	vertical-align: -0.1em;
	opacity: 0;
}
.hmw-hero__kicker-type.is-typing::after {
	opacity: 1;
	animation: hmw-cursor-blink 0.8s steps(1) infinite;
}
.hmw-hero__kicker-type.is-done::after { opacity: 0; animation: none; }
@keyframes hmw-cursor-blink { 50% { opacity: 0; } }

/* --- "tomen en serio": no está desde el principio — entra DESENFOCADA
   (mismo lenguaje que el blur-reveal de sección, §16) recién cuando termina
   el tipeo, y su subrayado (barra propia ::after con scaleX, no
   text-decoration — un underline nativo no se puede animar con una curva de
   easing) dibuja de izquierda a derecha al mismo tiempo que el texto se
   enfoca. Los dos gatillados por la MISMA clase (.is-revealed, que pone
   heroKicker en app.js apenas termina de tipear), así que se leen como un
   solo gesto: la palabra entra y se subraya a la vez, no en dos pasos. */
.hmw-hero__kicker-ul {
	position: relative;
	display: inline-block;
	transition: opacity 0.5s var(--hmw-ease), filter 0.5s var(--hmw-ease);
}
.hmw-underline-on .hmw-hero__kicker-ul {
	opacity: 0;
	filter: blur(10px);
	will-change: opacity, filter;
}
.hmw-hero__kicker-ul.is-revealed {
	opacity: 1;
	filter: blur(0);
}
.hmw-hero__kicker-ul::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.05em;
	height: 2px;
	background: currentColor;
	transform-origin: left;
}
.hmw-underline-on .hmw-hero__kicker-ul::after { transform: scaleX(0); }
.hmw-hero__kicker-ul.is-revealed::after {
	transform: scaleX(1);
	transition: transform 0.5s var(--hmw-ease);
}

/* Espacio para el video del hero, centrado sobre el fondo (sobre el WONDER).
   Formato 16:9 (estándar de video); si la clienta usa otra proporción se ajusta
   el aspect-ratio. El recuadro vive dentro del hero anclado, así que se mueve
   con el parallax y se tapa con la sección 2 al scrollear. */
.hmw-hero__video {
	width: min(560px, 82%);
	aspect-ratio: 16 / 9;
	margin: 88px auto 0;
	border-radius: 24px;
	overflow: hidden;
	background: #d9d9d9; /* gris del placeholder; lo tapa el video al cargarse. */
}
.hmw-hero__video video,
.hmw-hero__video iframe,
.hmw-hero__video img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
/* Estado vacío: el recuadro gris, sin controles ni ícono (como la referencia). */
.hmw-hero__video-ph {
	display: block;
	width: 100%;
	height: 100%;
}
.hmw-hl-lime { color: var(--hmw-highlight-lime); }
/* Utilidad genérica para otros usos; el kicker ya NO usa <u> (ver arriba,
   .hmw-hero__kicker-ul dibuja su propio subrayado animado con ::after). */
.hmw-hl-underline { text-decoration: underline; text-underline-offset: 2px; }

/* H1 (1:16): 38px Regular — no es bold. La separación con el fold la fija el
   padding de .hmw-hero__intro, no un margin de aquí. */
.hmw-hero__title {
	margin: 0;
	font-size: 38px;
	font-weight: 400;
	line-height: 1.3;
}

/* Sub (1:17): 24px Light, dos líneas. */
.hmw-hero__sub {
	margin-block-start: 0;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.4;
}

/* ==========================================================================
   09 — CARRUSEL DE REELS

   Figma (1:18 → 1:43): 5 tarjetas de 253x399, radio 20, en y=929, separadas
   29px. La primera y la última quedan cortadas por el borde del viewport: la
   tira sangra a propósito, es lo que comunica que hay scroll lateral.
   ========================================================================== */
/* Wrapper: contexto de posición para las flechas, que van absolutas sobre los
   lados POR FUERA del overflow de .hmw-reels (si no, se scrollearían). */
.hmw-reels-wrap {
	position: relative;
	margin-block-start: 114px;
}

.hmw-reels {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.hmw-reels::-webkit-scrollbar { display: none; }
.hmw-reels.is-dragging { cursor: grabbing; scroll-behavior: auto; }

/* Flechas de navegación del carrusel. Círculos semitransparentes centrados
   verticalmente sobre los bordes. Solo con puntero fino (mouse): en táctil el
   scroll nativo y el swipe ya cubren la navegación, y ocupan espacio de más. */
.hmw-reels__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: var(--hmw-text);
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.25s var(--hmw-ease), border-color 0.25s var(--hmw-ease), opacity 0.25s var(--hmw-ease);
}
@media (hover: hover) and (pointer: fine) {
	.hmw-reels__arrow { display: inline-flex; }
}
.hmw-reels__arrow:hover {
	background: var(--hmw-text);
	border-color: var(--hmw-text);
	color: var(--hmw-bg);
}
.hmw-reels__arrow:focus-visible {
	outline: 2px solid var(--hmw-text);
	outline-offset: 2px;
}
.hmw-reels__arrow--prev { inset-inline-start: 12px; }
.hmw-reels__arrow--next { inset-inline-end: 12px; }
.hmw-reels__arrow svg { display: block; }

.hmw-reels__track {
	display: flex;
	gap: 29px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
}
/* En Figma la 1ª tarjeta arranca en x=-43, o sea cortada por el borde. Aquí
   arranca en 0: cortar la primera tarjeta en el estado inicial esconde
   contenido que nadie sabe que puede recuperar. La tira sigue sangrando por la
   derecha, que es lo que comunica que hay scroll lateral. */

.hmw-reel {
	position: relative;
	flex: none;
	width: 253px;
	height: 399px;
}

/* La tarjeta es un <button> (abre el modal): resetea estilos de botón y ocupa
   toda la celda. Placeholder (sin reel cargado) es un <div>, sin interacción. */
.hmw-reel__card {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 20px;
	overflow: hidden;
	background: var(--hmw-panel);
	color: var(--hmw-text);
	font: inherit;
	cursor: pointer;
	transition: transform 0.4s var(--hmw-ease), box-shadow 0.4s var(--hmw-ease);
}
.hmw-reel__card.is-empty { cursor: default; }
/* Lift + sombra al pasar el mouse o llegar con teclado. El zoom real vive en
   .hmw-reel__media (abajo): se anima por separado porque el overflow:hidden de
   la tarjeta ya recorta, así que la imagen puede crecer sin desbordar el layout. */
.hmw-reel__card:not(.is-empty):hover,
.hmw-reel__card:not(.is-empty):focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.hmw-reel__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--hmw-ease);
}
.hmw-reel__card:not(.is-empty):hover .hmw-reel__media,
.hmw-reel__card:not(.is-empty):focus-visible .hmw-reel__media {
	transform: scale(1.06);
}

.hmw-reel__placeholder {
	display: grid;
	place-items: center;
	width: 100%; height: 100%;
	color: var(--hmw-text-inactive);
	font-size: 14px;
	letter-spacing: 0.1em;
}

/* Botón play sobre la tarjeta: círculo translúcido, crece en hover/focus.
   OJO: el centrado usa la propiedad CSS `translate` (no `transform`) a
   propósito. `translate` y `transform` son propiedades separadas que se
   COMPONEN — si el hover pone `transform: translate(-50%,-50%) scale(...)`,
   ese -50%,-50% se suma al de `translate` en vez de reemplazarlo, y el botón
   salta de lugar en vez de solo agrandarse (bug real que tenía esto). Por eso
   el hover solo toca `scale`, nunca `transform`, para no pisar el centrado. */
.hmw-reel__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding-inline-start: 4px; /* óptico: el triángulo pesa a la izquierda. */
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--hmw-text);
	transition: scale 0.3s var(--hmw-ease), background-color 0.3s var(--hmw-ease);
}
.hmw-reel__card:hover .hmw-reel__play,
.hmw-reel__card:focus-visible .hmw-reel__play {
	scale: 1.08;
	background: rgba(0, 0, 0, 0.6);
}

/* Nombre del cliente abajo, sobre un degradado para que se lea sobre el video. */
.hmw-reel__cliente {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 40px 14px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	color: var(--hmw-text);
	font-size: 14px;
	font-weight: 500;
	text-align: start;
}

/* ==========================================================================
   09b — MODAL DE REEL

   Se abre al hacer clic en una tarjeta. Muestra el video (MP4 propio o iframe
   de Instagram según data-modo) y, al lado, la metadata: cliente, cuenta y las
   4 stats con ícono. Es un diálogo modal (app.js hace foco/Escape/scroll-lock).
   ========================================================================== */
.hmw-reel-modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	padding: 24px;
}
.hmw-reel-modal[hidden] { display: none; }

.hmw-reel-modal__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	padding: 0;
	background: rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
}

.hmw-reel-modal__dialog {
	position: relative;
	display: flex;
	gap: 0;
	max-width: min(880px, 100%);
	max-height: calc(100dvh - 48px);
	border-radius: 20px;
	overflow: hidden;
	background: var(--hmw-panel);
}

.hmw-reel-modal__close {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: var(--hmw-text);
	cursor: pointer;
}
.hmw-reel-modal__close:hover { background: rgba(0, 0, 0, 0.75); }

/* Área del video: 9:16, alto acotado al viewport. */
.hmw-reel-modal__stage {
	flex: none;
	width: min(360px, 56vw);
	aspect-ratio: 9 / 16;
	max-height: calc(100dvh - 48px);
	background: #000;
}
.hmw-reel-modal__stage video,
.hmw-reel-modal__stage iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* Panel de datos al lado del video. */
.hmw-reel-modal__info {
	flex: 1;
	min-width: 240px;
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto;
}
.hmw-reel-modal__cliente {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}
.hmw-reel-modal__cuenta {
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
	font-weight: 300;
}

.hmw-reel-modal__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.hmw-reel-modal__stat {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 500;
}
.hmw-reel-modal__stat svg { flex: none; color: var(--hmw-accent); }
/* Una stat sin número cargado no se muestra (la oculta el JS con este hook). */
.hmw-reel-modal__stat.is-empty { display: none; }

.hmw-reel-modal__ig {
	margin-block-start: auto;
	padding-block-start: 28px;
	color: var(--hmw-highlight-lime);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.hmw-reel-modal__ig:hover { text-decoration: underline; }
.hmw-reel-modal__ig[hidden] { display: none; }

/* ==========================================================================
   10 — PIVOTE  (1:44) — 44px Regular, centrado, ancho 993
   ========================================================================== */
.hmw-pivote {
	padding-block: 251px 0; /* Reels terminan en 1328; el texto entra en 1579. */
	text-align: center;
}
.hmw-pivote__title {
	max-width: 993px;
	margin-inline: auto;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.3;
}

/* ==========================================================================
   11 — SERVICIOS

   Figma (1:51, 1:52): dos paneles #1F1F1F de 571px, radio 20 — índice de 409px
   y detalle de 741px, separados 25px. El detalle NO lleva bullets en dos
   columnas ni cupos: el "Incluye:" va como texto corrido de 14px (1:56).
   ========================================================================== */
.hmw-servicios { padding-block-start: 77px; } /* Pivote termina 1693; paneles 1770. */

.hmw-servicios__grid {
	display: grid;
	grid-template-columns: 409px 741px;
	gap: 25px;
	/* stretch = los dos paneles comparten el alto de la fila y quedan parejos.
	   El alto lo fija el panel más alto (el detalle, cuyo contenido no cabe en
	   los 571 del Figma), y el índice se estira para igualarlo. */
	align-items: stretch;
}

/* --- Índice (tablist) --- */
.hmw-servicios__index {
	display: flex;
	flex-direction: column;
	/* min-height y no height: 571 es el piso del Figma, pero si el detalle crece
	   el índice lo acompaña (por el stretch del grid) en vez de quedar corto. */
	min-height: 571px;
	border-radius: 20px;
	background: var(--hmw-panel);
}

/* Cada ítem ocupa un tercio del panel (flex:1) y su contenido va CENTRADO en
   ese tercio — no pegado arriba. Medido contra el Figma: centrados, los ítems
   caen a 1-4px de sus posiciones reales (1818 / 2011 / 2198); pegados arriba se
   van ~48px y dejan un hueco muerto al final del panel.

   Es grid y no flex por un detalle: en el Figma el "01" y el nombre tienen los
   TOPES alineados (ambos en 1818), aunque midan distinto (65 vs 98px). Con
   align-items:center el número se descolgaría respecto a la primera línea del
   nombre. Grid separa las dos cosas: align-content centra el bloque entero en la
   celda, align-items:start mantiene los topes alineados entre sí. */
.hmw-servicios__tab {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 62px;
	align-content: center;
	align-items: start;
	padding: 0 33px;
	border: 0;
	background: none;
	color: inherit;
	/* Los <button> NO heredan la tipografía del documento: traen la fuente propia
	   del navegador (Arial). Sin esto, el número y el nombre del servicio salían
	   en Arial mientras el resto de la página iba en Poppins. */
	font: inherit;
	text-align: start;
	cursor: pointer;
	flex: 1;
	position: relative;
}

/* Separadores (1:57, 1:60): 373px, sólo ENTRE ítems — no arriba ni abajo. */
.hmw-servicios__tab + .hmw-servicios__tab::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 18px;
	width: 373px;
	height: 1px;
	background: rgba(255, 255, 255, 0.25);
}

/* El número es #4B4A4A incluso en el ítem activo (1:53): sólo el NOMBRE cambia
   a blanco. Es lo que distingue el estado — más el peso, no sólo el color. */
.hmw-servicios__num {
	flex: none;
	color: var(--hmw-text-inactive);
	font-size: 50px;
	font-weight: 700;
	line-height: 1.3;
}
.hmw-servicios__name {
	color: var(--hmw-text-inactive);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.76px;
	text-transform: uppercase;
	transition: color 0.3s var(--hmw-ease);
}
.hmw-servicios__tab.is-active .hmw-servicios__name { color: var(--hmw-text); }
.hmw-servicios__tab:hover .hmw-servicios__name { color: rgba(255, 255, 255, 0.7); }
/* Borde de selección (pedido explícito, no está en el Figma): mismo verde
   lima que el resto de highlights del theme (--hmw-highlight-lime). outline,
   no border: no empuja el layout del tab (mismo recurso que el foco global de
   arriba, §02) y sigue el border-radius en navegadores modernos. */
.hmw-servicios__tab.is-active {
	border-radius: 16px;
	outline: 2px solid var(--hmw-highlight-lime);
	outline-offset: -8px;
}

/* --- Detalle (tabpanels) --- */
/* Padding simétrico arriba y abajo. Antes el de abajo era 0 y el botón quedaba
   colgando del borde.

   min-height y no height fijo: el contenido del servicio 01 mide ~494px y con
   los 142 de padding necesita ~636 — no cabe en los 571 del artboard. Con alto
   fijo el botón quedaba a 6px del borde en vez de a 71 (el "falta margen abajo"
   que se veía en desktop y no en móvil, donde el alto ya era auto). Con
   min-height la caja crece y el padding inferior se respeta siempre. */
.hmw-servicios__detail {
	position: relative;
	min-height: 571px;
	padding: 71px 57px;
	border-radius: 20px;
	background: var(--hmw-panel);
}

.hmw-servicios__panel[hidden] { display: none; }
/* Transición: fade + desplazamiento, no corte seco (brief §5). */
.hmw-servicios__panel {
	animation: hmw-panel-in 0.4s var(--hmw-ease) both;
}
@keyframes hmw-panel-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Statement (1:55): 27px, con la segunda mitad en Bold. */
.hmw-servicios__statement {
	max-width: 626px;
	margin: 0;
	font-size: 27px;
	font-weight: 400;
	line-height: 1.4;
}
.hmw-servicios__statement strong { font-weight: 700; }

/* Párrafo + "Incluye:" (1:56): 14px Light, ancho 617. */
.hmw-servicios__parrafo {
	max-width: 617px;
	margin-block-start: 21px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}
.hmw-servicios__incluye {
	max-width: 617px;
	margin-block-start: 21px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}

/* Precio (1:68): "Desde" 12px encima, monto 44px, "clp" 9px al lado. */
.hmw-servicios__precio { margin-block-start: 37px; }
.hmw-servicios__precio-desde {
	font-size: 12px;
	line-height: 1.3;
	text-transform: uppercase;
}
.hmw-servicios__precio-fila { display: flex; align-items: baseline; gap: 3px; }
.hmw-servicios__precio-monto {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.3;
}
.hmw-servicios__precio-clp {
	font-size: 9px;
	line-height: 1.3;
	text-transform: uppercase;
}
.hmw-servicios__precio-unidad {
	font-size: 12px;
	line-height: 1.3;
}

/* Cupos: NO está en el Figma, pero el brief lo pide como mecanismo real de
   conversión. Va discreto, sin competir con el precio. */
.hmw-servicios__cupos {
	margin-block-start: 8px;
	color: var(--hmw-highlight-lime);
	font-size: 12px;
	font-weight: 300;
}

.hmw-servicios__cta { margin-block-start: 28px; font-size: 14px; }

/* ==========================================================================
   12 — PILARES (marquee)

   Figma (1:75): 80px Medium, uppercase, en y=2530. El loop es ambiental y
   continuo (brief §5): no es scroll-triggered.
   ========================================================================== */
.hmw-pilares {
	margin-block-start: 189px; /* Paneles terminan 2341; el marquee entra 2530. */
	overflow: hidden;
	white-space: nowrap;
}
.hmw-pilares__track {
	display: inline-flex;
	gap: 0;
	animation: hmw-marquee 60s linear infinite;
	will-change: transform;
}
.hmw-pilares__group {
	display: inline-flex;
	flex: none;
	color: var(--hmw-highlight-lime); /* pedido explícito: mismo verde lima del borde de selección */
	font-size: 80px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
}
.hmw-pilares__item::after { content: " · "; white-space: pre; }
@keyframes hmw-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* La tira va duplicada: -50% = 1 vuelta. */
}

/* ==========================================================================
   13 — STATEMENT DE MARCA

   Figma (1:6): foto de 1281x668 al 40% de opacidad, en y=2660. El texto
   (1:45-48) mezcla Poppins Regular 34px con Caslon Italic 42px — la itálica
   es MÁS GRANDE que el texto que la rodea, no del mismo cuerpo.
   ========================================================================== */
.hmw-statement {
	position: relative;
	margin-block-start: 26px; /* Marquee termina 2634; la foto entra en 2660. */
	min-height: 668px;
	display: grid;
	/* Columna a ancho completo (minmax(0,1fr)) para que el contenido quede
	   centrado de verdad. Con place-items:center solo, la columna era "auto"
	   (del ancho del texto) y, al no fijar justify-content, la celda entera se
	   pegaba a la izquierda: el bloque se veía corrido aunque el texto interno
	   estuviera centrado. Con 1fr la celda ocupa todo el ancho y el .hmw-container
	   (max-width + margin-inline:auto) se centra dentro. */
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
	text-align: center;
	overflow: hidden;
}
.hmw-statement__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden; /* recorta el margen extra de la imagen (ver de abajo) */
}
/* La imagen mide 130% del alto del contenedor, centrada con inset -15% arriba
   y abajo: ese 15% de margen a cada lado es el recorrido disponible para el
   parallax (app.js, módulo statementParallax) sin que se vea un hueco en
   ningún extremo. Si el JS no corre, el inset -15% ya la deja centrada y
   estática — se ve bien de por sí, sin depender de la animación. */
.hmw-statement__media img {
	position: absolute;
	inset: -15% 0;
	width: 100%;
	height: 130%;
	object-fit: cover;
	opacity: 0.4; /* Medido en Figma: el overlay oscuro ES la opacidad de la foto. */
	will-change: transform;
}
.hmw-statement__text {
	max-width: 956px;
	font-size: 34px;
	font-weight: 400;
	line-height: 1.2;
	margin:auto;
}
/* Las palabras de énfasis: única aparición de la serif en todo el theme. */
.hmw-statement__text em {
	font-family: var(--hmw-font-serif);
	font-style: italic;
	font-size: 42px;
}
.hmw-statement__cta { margin-block-start: 34px; }

/* ==========================================================================
   14 — EQUIPO

   Figma (1:5): rectángulo #DB094E al 90% con blur 32px, 1112x413, en y=3438.
   El blur es del RECTÁNGULO, no un box-shadow: por eso el borde se deshace.
   ========================================================================== */
.hmw-equipo {
	position: relative;
	margin-block-start: 110px; /* Statement termina 3328; el glow entra 3438. */
	/* Padding simétrico = el contenido queda centrado en el cuadrado por
	   construcción. En Figma los márgenes son 65 arriba y 55 abajo; 60/60 cae
	   dentro de esa tolerancia y no depende de dónde corten las líneas. */
	padding-block: 60px;
}

/* Escenario de 1280 centrado: alinea el contenido del equipo con el resto de la
   página en cualquier ancho de ventana. (El glow rosa de fondo se eliminó: se
   veía descolocado sobre el negro de la pila de secciones.) */
.hmw-equipo__stage {
	position: relative;
	width: 100%;
	max-width: var(--hmw-stage); /* 1280 */
	margin-inline: auto;
}

/* El equipo no se alinea con el resto de la página: en Figma el texto arranca en
   x=152 (no en el gutter de 53) y los círculos en x=642. Es una sangría propia
   de la sección, para que el bloque respire dentro del glow rosa. */
.hmw-equipo__grid {
	display: grid;
	grid-template-columns: 423px 1fr;
	gap: 67px;
	align-items: start;
	padding-inline: 152px;
}

/* "Conoce sobre nosotras" (1:49): Poppins ITALIC 36px — es el único título
   itálico del theme, y no es Caslon: es Poppins. */
.hmw-equipo__titulo {
	margin: 0;
	font-size: 36px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.3;
}
.hmw-equipo__intro {
	margin-block-start: 15px;
	font-size: 21px;
	font-weight: 400;
	line-height: 1.4;
}

.hmw-equipo__lista {
	display: flex;
	flex-direction: column;
	gap: 19px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hmw-integrante {
	display: flex;
	align-items: center;
	gap: 25px;
}
/* Círculo de 137px (1:76). En Figma es un plano #1F1F1F: las fotos reales
   todavía no existen, así que el vacío es el diseño, no un error. */
.hmw-integrante__foto {
	flex: none;
	width: 137px;
	height: 137px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--hmw-panel);
	transition: transform 0.4s var(--hmw-ease);
}
/* Hover en la tarjeta completa (no solo la foto): la fila entera es la unidad
   visual, así que el gesto de "estoy mirando esto" debe cubrir todo el <li>. */
.hmw-integrante:hover .hmw-integrante__foto { transform: scale(1.05); }
.hmw-integrante__nombre {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.4;
}
.hmw-integrante__cargo {
	max-width: 307px;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.5;
}

/* ==========================================================================
   15b — SECCIONES QUE EL BRIEF PIDE Y EL FIGMA NO DIBUJA

   ATENCIÓN: el Figma (node 1:4) NO incluye estas cuatro secciones — dolor
   (brief §4), casos de éxito (§10), CTA final (§11) ni el formulario de
   contacto (§6). El estilo de abajo NO está aprobado por diseño: está derivado
   del lenguaje del resto de la página (mismos cuerpos, mismo panel #1F1F1F,
   mismos botones) para que no se vean rotas mientras se define su diseño real.

   No tratar estos valores como fuente de verdad: cuando exista el diseño, se
   reemplazan. Todo lo demás en esta hoja sí sale de medir el Figma.
   ========================================================================== */

/* --- Dolor (§4): mismo cuerpo que el pivote, que cumple un rol equivalente. */
.hmw-dolor {
	padding-block: 160px;
	text-align: center;
}
.hmw-dolor__statement {
	max-width: 993px;
	margin-inline: auto;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.3;
}

/* --- Casos de éxito (§10): estructura final pendiente de definir por la
       clienta, así que el bloque es deliberadamente neutro. La sección no se
       pinta si no hay contenido cargado (ver section-casos.php). */
.hmw-casos { padding-block: 120px; }
.hmw-casos__titulo {
	margin: 0 0 48px;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
}
.hmw-casos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* OJO: el template (section-casos.php) usa "hmw-casos__card" — antes este
   bloque decía "hmw-caso" (singular) y no coincidía con nada en el HTML, así
   que la sección se veía sin padding, fondo ni radio. Corregido: ahora el
   selector coincide con el marcado real. */
.hmw-casos__card {
	padding: 32px;
	border-radius: 20px;
	background: var(--hmw-panel);
	transition: transform 0.4s var(--hmw-ease), box-shadow 0.4s var(--hmw-ease);
}
.hmw-casos__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}
.hmw-casos__metrica {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2;
}
.hmw-casos__nombre { margin-block-start: 8px; font-size: 21px; }
.hmw-casos__cita {
	margin-block-start: 16px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}
.hmw-casos__media {
	margin-block-start: 20px;
	border-radius: 12px;
	overflow: hidden;
}
.hmw-casos__img,
.hmw-casos__video {
	width: 100%;
	display: block;
	transition: transform 0.5s var(--hmw-ease);
}
.hmw-casos__card:hover .hmw-casos__img,
.hmw-casos__card:hover .hmw-casos__video {
	transform: scale(1.06);
}

/* --- CTA final (§11). "Hazlo." repite el gesto del loader a propósito: es el
       mismo remate con el que abre la página. */
.hmw-cta-final { padding-block: 140px; text-align: center; }
.hmw-cta-final__titulo {
	font-size: 80px;
	font-weight: 900;
	line-height: 1;
}
.hmw-cta-final__sub {
	max-width: 620px;
	margin: 20px auto 0;
	font-size: 21px;
	font-weight: 300;
	line-height: 1.4;
}
.hmw-cta-final__inner .hmw-btn { margin-block-start: 32px; }

/* --- Contacto / lista de espera (§6). */
.hmw-contacto { padding-block: 120px; }
.hmw-contacto__titulo {
	margin: 0 0 12px;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.3;
}
.hmw-contacto__intro {
	margin-block-end: 32px;
	font-size: 16px;
	font-weight: 300;
}

/* ==========================================================================
   16 — REVEALS AL SCROLL (brief §5)
   ========================================================================== */

   El estado oculto va condicionado a .hmw-js (que pone un script inline en el
   <head>) a propósito: si app.js no carga —404, error de JS, bloqueador— sin
   esta guarda TODAS las secciones con data-hmw-reveal quedarían en opacity:0
   para siempre y la página se vería vacía. Sin JS no hay animación, pero el
   contenido está. */
/* La sección entra DESENFOCADA desde abajo y se enfoca A MEDIDA que sube con el
   scroll (medido de la referencia midu.design). El blur/opacidad/desplazamiento
   los escribe app.js frame a frame, ligados a la posición del elemento en el
   viewport — NO hay transición CSS acá: la "suavidad" viene del scroll continuo,
   no de un tween de duración fija (eso se sentía seco).

   El estado inicial oculto se gatilla con .hmw-reveal-on, que app.js pone en
   <html> sólo cuando el módulo de reveals arrancó. Si el JS no corre, la clase
   no está y el contenido se ve normal — nunca queda borroso para siempre. */
.hmw-reveal-on [data-hmw-reveal] {
	opacity: 0;
	filter: blur(14px);
	transform: translateY(30px);
	will-change: opacity, transform, filter;
}

/* ==========================================================================
   16b — REVEAL DE TEXTO POR PALABRA (headings)

   Distinto del reveal de arriba: ese es continuo y ligado al scroll de la
   SECCIÓN completa; este es un disparo único por PALABRA cuando el heading
   entra en viewport (IntersectionObserver, app.js módulo splitReveal). Se
   pueden superponer sin pelearse: uno mueve/desenfoca el bloque entero, el
   otro hace que el texto "entre" palabra a palabra dentro de ese bloque.

   Mismo patrón de guarda que arriba: el estado oculto va condicionado a
   .hmw-split-on, que app.js pone SOLO si logró envolver las palabras en
   spans. Si el JS no corre, no hay wrapper y el texto se ve plano — nunca
   invisible.
   ========================================================================== */
.hmw-split-word { display: inline-block; overflow: hidden; vertical-align: top; }
.hmw-split-word-inner {
	display: inline-block;
	transition: transform 0.6s var(--hmw-ease), opacity 0.5s var(--hmw-ease);
}
.hmw-split-on [data-hmw-split] .hmw-split-word-inner {
	opacity: 0;
	transform: translateY(110%);
}
.hmw-split-on [data-hmw-split].is-revealed .hmw-split-word-inner {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   17 — FORMULARIOS Y COOKIES (Ley 21.719 — ver inc/privacy.php)
   ========================================================================== */
.hmw-form { display: grid; gap: 16px; max-width: 480px; }
.hmw-form label { font-size: 14px; font-weight: 300; }
.hmw-form input[type="text"],
.hmw-form input[type="email"],
.hmw-form input[type="tel"] {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	background: var(--hmw-panel);
	color: var(--hmw-text);
	font-family: var(--hmw-font);
	font-size: 16px;
}
/* Honeypot: invisible para personas, pero NO display:none — algunos bots
   ignoran los campos ocultos así. */
.hmw-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.hmw-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	font-weight: 300;
}
.hmw-form__status { font-size: 14px; min-height: 1.4em; }

.hmw-cookies {
	position: fixed;
	inset-block-end: 20px;
	inset-inline-start: 50%;
	translate: -50% 0;
	z-index: 70;
	display: none;
	width: min(560px, calc(100vw - 32px));
	padding: 24px;
	border-radius: 16px;
	background: rgba(21, 21, 21, 0.95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}
.hmw-cookies.is-visible { display: block; }
.hmw-cookies__actions { display: flex; gap: 12px; margin-block-start: 16px; }

/* ==========================================================================
   18 — RESPONSIVE

   El Figma sólo documenta el desktop de 1280. De ahí para abajo las decisiones
   son de desarrollo: la referencia es que el tráfico entra sobre todo de
   Instagram, o sea móvil (brief §2).
   ========================================================================== */
@media (max-width: 1279px) {
	:root { --hmw-gutter: 32px; }

	/* Debajo del ancho del artboard, cover recortaría la imagen por los lados y
	   el wordmark se vuelve ilegible — a 375px llega a leerse "ND" en vez de
	   "WONDER". Así que se ajusta al ancho y el rosa de la imagen rellena el
	   resto del alto. Como el relleno es el color muestreado del propio JPG, no
	   se ve la unión.

	   El 70% no es arbitrario: en el diseño el wordmark está centrado al 67.5%
	   del alto del hero (348→669 sobre 752). Alineando la banda ahí queda a la
	   misma altura relativa que en desktop. Con "bottom" caía dentro de la
	   elipse de fundido y el wordmark desaparecía. */
	.hmw-hero__bg {
		background-size: 100% auto;
		background-position: center 70%;
	}

	/* El título NO lleva override de margin acá: el margin-top:auto del base es
	   lo que lo ancla abajo, y un valor fijo lo pisaría y volvería a dejarlo
	   flotando a media altura. Lo único que cambia por viewport es el padding
	   del contenedor. */

	/* Servicios apilados: el índice pasa a ser una FILA de 3 columnas (no una
	   lista vertical) y el detalle va como tarjeta aparte debajo. El número
	   queda ARRIBA del nombre, y los divisores se vuelven verticales entre
	   columnas. Es el layout que pidió la clienta para pantallas chicas. */
	.hmw-servicios__grid { grid-template-columns: 1fr; }

	.hmw-servicios__index {
		flex-direction: row;
		min-height: 0;
		/* Sin padding vertical: el espacio va DENTRO de cada tab (padding-block),
		   así el tab llena la tarjeta de borde a borde y el divisor puede ir a
		   alto completo. Si el padding vive acá, el divisor queda metido adentro. */
		padding: 0;
	}
	.hmw-servicios__tab {
		/* Columna: número arriba, nombre abajo. En desktop van lado a lado. */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: normal;
		gap: 16px;
		padding: 40px 24px;
		/* min-width:0 = las 3 columnas quedan del MISMO ancho. Sin esto, flex no
		   baja de la anchura del contenido, y "MARCA PERSONAL" (el nombre más
		   largo) empuja su columna más ancha que las otras dos. */
		min-width: 0;
	}
	/* Divisor vertical entre columnas, de borde a borde de la tarjeta (alto
	   completo, como en el diseño). El tab ocupa toda la altura del índice, así
	   que height:100% cubre la tarjeta entera. */
	.hmw-servicios__tab + .hmw-servicios__tab::before {
		inset-block: 0;
		inset-inline-start: 0;
		width: 1px;
		height: 100%;
	}

	.hmw-servicios__detail { min-height: 0; padding: 40px 32px; }

	.hmw-equipo__grid { grid-template-columns: 1fr; gap: 48px; padding-inline: var(--hmw-gutter); }

	/* El wordmark ya es fluido (min(9.18vw, …)): no necesita override aquí. */
}

@media (max-width: 767px) {
	/* A 375px el header no cabe: wordmark + Menu + Comenzar suman 466. Se achica
	   todo y el botón de menú queda solo con su ícono. No se esconde el CTA: el
	   tráfico entra sobre todo desde Instagram, o sea móvil (brief §2), y es la
	   acción que convierte. */
	.hmw-header__inner { padding-inline: 16px; }
	.hmw-header__actions { gap: 8px; }
	.hmw-wordmark-hash { font-size: 13px; }
	.hmw-btn { height: 30px; padding-inline: 14px; font-size: 12px; }

	/* Modal de reel: en móvil se apila (video arriba, datos abajo) y ocupa casi
	   toda la pantalla. El video no puede llevarse todo el alto o los datos no
	   entran, así que se acota su altura. */
	.hmw-reel-modal { padding: 12px; }
	.hmw-reel-modal__dialog { flex-direction: column; width: 100%; max-height: calc(100dvh - 24px); }
	.hmw-reel-modal__stage { width: 100%; aspect-ratio: auto; height: 52vh; }
	.hmw-reel-modal__info { padding: 24px 20px; }
	.hmw-reel-modal__stats { gap: 14px; }

	/* El offset se ajusta en el contenedor, no como margin del kicker: el padding
	   base (231px) sigue vigente y un margin aquí se sumaría en vez de pisarlo. */
	.hmw-hero__content { padding-block-start: 140px; }
	/* white-space vuelve a normal: en un teléfono la frase no entra en una
	   línea a NINGÚN tamaño legible — acá sí conviene que rompa. */
	.hmw-hero__kicker { font-size: 22px; white-space: normal; }
	.hmw-hero__title { font-size: 26px; }
	.hmw-hero__sub { font-size: 16px; }
	.hmw-hero__bg { height: 560px; }
	/* La proporción va explícita: el SVG trae width/height al 100%, así que no
	   tiene tamaño intrínseco y height:auto lo resolvería a 5:1. Aplastado, el
	   blur se comprime y la elipse se lee como una mancha negra dura. */
	.hmw-hero__glow {
		inset-block-start: 400px;
		width: 200%;
		height: auto;
		aspect-ratio: 1845 / 595;
	}

	.hmw-reels { margin-block-start: 64px; }
	.hmw-reels__track { padding-inline: 20px; gap: 16px; }
	.hmw-reel { width: 200px; height: 316px; }

	.hmw-pivote { padding-block-start: 100px; }
	.hmw-pivote__title { font-size: 26px; }

	.hmw-servicios { padding-block-start: 80px; }
	/* Índice horizontal en móvil: 3 columnas angostas, así que número y nombre
	   más chicos para que "MARCA PERSONAL" entre sin cortarse. */
	.hmw-servicios__index { padding-block: 28px; }
	.hmw-servicios__tab { padding-inline: 14px; gap: 10px; }
	.hmw-servicios__num { font-size: 22px; }
	.hmw-servicios__name { font-size: 15px; letter-spacing: 0.3px; }
	.hmw-servicios__statement { font-size: 20px; }
	.hmw-servicios__precio-monto { font-size: 32px; }

	.hmw-pilares { margin-block-start: 90px; }
	.hmw-pilares__group { font-size: 40px; }

	.hmw-statement { min-height: 480px; padding-inline: 20px; }
	.hmw-statement__text { font-size: 20px; }
	.hmw-statement__text em { font-size: 25px; }

	.hmw-equipo { margin-block-start: 80px; }
	.hmw-integrante__foto { width: 88px; height: 88px; }
	.hmw-integrante__nombre { font-size: 20px; }

}

/* ==========================================================================
   19 — PREFERS-REDUCED-MOTION

   Único bloque con !important del theme: es el patrón estándar para anular
   animaciones de terceros y de utilidades. No se usa como herramienta normal.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	/* Los reveals no deben dejar el contenido invisible ni borroso si no hay
	   animación (incluye el filter:blur de entrada). */
	.hmw-reveal-on [data-hmw-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
	/* Red de seguridad: app.js ya no arma el split si hay reduced-motion, pero
	   por si acaso queda algo montado, texto siempre visible. */
	.hmw-split-word-inner { opacity: 1 !important; transform: none !important; }
	/* Mismo criterio para el kicker: texto completo, sin tipeo, cursor apagado
	   y subrayado ya dibujado — app.js tampoco arma esto si hay reduced-motion,
	   esta es la red de seguridad. */
	.hmw-type-char { opacity: 1 !important; }
	.hmw-hero__kicker-type::after { display: none !important; }
	.hmw-hero__kicker-ul { opacity: 1 !important; filter: none !important; }
	.hmw-hero__kicker-ul::after { transform: scaleX(1) !important; }
	/* El marquee queda estático y legible desde el inicio (brief §7). */
	.hmw-pilares__track { animation: none !important; }
	.hmw-pilares { white-space: normal; }
	.hmw-pilares__group { flex-wrap: wrap; }
}