/* ==========================================================================
	 SISTEMA TIPOGRÁFICO — Carlos Aparicio Portfolio
	 Fuentes: Ubuntu (títulos) + Inter Tight (cuerpo y UI)
	 Escala: Perfect Fourth (×1.333) sobre base 16px
	 Grilla: múltiplos de 8pt
	 ========================================================================== */

/* --------------------------------------------------------------------------
	 IMPORTS — Google Fonts
	 -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


/* --------------------------------------------------------------------------
	 TOKENS — Variables CSS
	 -------------------------------------------------------------------------- */
:root {

	/* Familias tipográficas */
	--font-display:    'Ubuntu', sans-serif;
	--font-body:       'Inter Tight', sans-serif;
	--font-monospace:   'IBM Plex Mono', monospace;

	/* Escala de tamaños — Perfect Fourth (1.333) */
/* Base: 16px → cada paso × 1.333             */

	--text-display:    64px;   /* Hero exclusivo                  */
	--text-h1:         48px;   /* Título de página                */
	--text-h2:         40px;   /* Título de sección               */
	--text-h3:         32px;   /* Subsección                      */
	--text-h4:         24px;   /* Componente / card               */
	--text-lead:       20px;   /* Párrafo introductorio           */
	--text-body:       16px;   /* Cuerpo principal — base 1rem    */
	--text-small:      14px;   /* Texto de apoyo / metadata       */
	--text-label:      12px;   /* Labels, eyebrows, UI            */

	/* Line heights — múltiplos de 8 */
	--lh-display:      72px;
	--lh-h1:           56px;
	--lh-h2:           48px;
	--lh-h3:           40px;
	--lh-h4:           32px;
	--lh-lead:         32px;
	--lh-body:         28px;
	--lh-small:        24px;
	--lh-label:        16px;

	/* Letter spacing */
	--ls-display:      -0.5px;
	--ls-h1:           -0.3px;
	--ls-h2:           -0.2px;
	--ls-h3:            0px;
	--ls-h4:            0px;
	--ls-label:         0.08em;

	/* Espaciados verticales — múltiplos de 8 */
	--space-2:          8px;
	--space-3:         12px;
	--space-4:         16px;
	--space-6:         24px;
	--space-8:         32px;
	--space-12:        48px;
	--space-16:        64px;
	--space-24:        96px;
}


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

html {
	font-size: 16px;           /* base para rem */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text-base);
	background-color: var(--color-bg);
}


/* --------------------------------------------------------------------------
	 DISPLAY — Solo para hero / portada
	 -------------------------------------------------------------------------- */
.text-display {
	font-family:     var(--font-display);
	font-size:       var(--text-display);
	line-height:     var(--lh-display);
	font-weight:     300;
	letter-spacing:  var(--ls-display);
	color:           var(--color-surface);
}
.text-display b { font-weight: 700; }

/* --------------------------------------------------------------------------
	 HEADINGS
	 -------------------------------------------------------------------------- */

h1, .h1 { margin-bottom: var(--space-2); }
h2, .h2, h2 a { margin-bottom: var(--space-2); }
h3, .h3, h3 a { margin-bottom: var(--space-2); }
h4, .h4 { margin-bottom: var(--space-2); }

h1,
.h1 {
	font-family:     var(--font-display);
	font-size:       var(--text-h1);
	line-height:     var(--lh-h1);
	font-weight:     700;
	letter-spacing:  var(--ls-h1);
	color:           var(--color-text-base);
}

h2,
.h2,
h2 a {
	font-family:     var(--font-display);
	font-size:       var(--text-h2);
	line-height:     var(--lh-h2);
	font-weight:     700;
	letter-spacing:  var(--ls-h2);
	color:           var(--color-text-base);
}

h3,
.h3,
h3 a {
	font-family:     var(--font-display);
	font-size:       var(--text-h3);
	line-height:     var(--lh-h3);
	font-weight:     500;
	letter-spacing:  var(--ls-h3);
	color:           var(--color-text-base);
}

h4,
.h4 {
	font-family:     var(--font-display);
	font-size:       var(--text-h4);
	line-height:     var(--lh-h4);
	font-weight:     500;
	letter-spacing:  var(--ls-h4);
	color:           var(--color-text-base);
}

:is(h1, h2, h3, h4, h5, h6) > a.enlace {
  display: inline-block;
  line-height: 1;
}

h2 > a.enlace {
  display: inline-block;
  line-height: 1;
  margin: 0;
}

/* --------------------------------------------------------------------------
	 PÁRRAFOS Y CUERPO
	 -------------------------------------------------------------------------- */

/* Párrafo introductorio — va justo bajo el H1 o H2 */
.text-lead {
	font-family:   var(--font-body);
	font-size:     var(--text-lead);
	line-height:   var(--lh-lead);
	font-weight:   500;
	color:         var(--color-text-sec);
	margin-bottom: var(--space-3);
	max-width:     640px;
}

/* Párrafo de cuerpo principal */
p,
.text-body {
	font-family:   var(--font-body);
	font-size:     var(--text-body);
	line-height:   var(--lh-body);
	font-weight:   400;
	color:         var(--color-text-sec);
	margin-bottom: var(--space-2);
	max-width:     640px;
}

p:last-child,
.text-body:last-child {
	margin-bottom: 0;
}

/* Texto pequeño — metadata, fechas, notas */
.text-small {
	font-family:   var(--font-body);
	font-size:     var(--text-small);
	line-height:   var(--lh-small);
	font-weight:   400;
	color:         var(--color-text-sec);
}


/* --------------------------------------------------------------------------
	 LABEL / EYEBROW
	 -------------------------------------------------------------------------- */

/* Label en mayúsculas — categorías, disciplinas, UI */
.text-label,
.eyebrow {
	font-family:     var(--font-body);
	font-size:       var(--text-label);
	line-height:     var(--lh-label);
	font-weight:     500;
	letter-spacing:  var(--ls-label);
	text-transform:  uppercase;
	color:           var(--color-accent);
	display:         block;
	margin-bottom:   var(--space-2);
}

/* Label neutro — sin acento */
.text-label--neutral {
	color: var(--color-text-sec);
}

.monospace {
	font-family: var(--font-monospace);
	font-weight: 400;
	line-height: 155%;
	letter-spacing: 0.25px;
}

footer .text-small {
padding-top: 8px;
}

/* --------------------------------------------------------------------------
	 FRASE FUERZA — Blockquote editorial
	 -------------------------------------------------------------------------- */
.frase-fuerza {
  border-left: 1px solid var(--color-border-tertiary);
  padding:     var(--space-3) var(--space-4);
  margin:      var(--space-5) 0;
}

.texto-narrativo, .frase-fuerza p {
  font-family: var(--font-monospace);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.texto-narrativo.destacado {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

/* --------------------------------------------------------------------------
	 UTILIDADES
	 -------------------------------------------------------------------------- */

/* Color */
.text-accent   { color: var(--color-accent); }
.text-base     { color: var(--color-text-base); }
.text-secondary{ color: var(--color-text-sec); }
.text-surface  { color: var(--color-surface); }

/* Peso */
.font-regular  { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-bold     { font-weight: 700; }

/* Familia */
.font-display  { font-family: var(--font-display); }
.font-body     { font-family: var(--font-body); }

/* Alineación */
.text-left     { text-align: left; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }

/* Sin max-width — para títulos que ocupan todo el ancho */
.text-full     { max-width: none; }

.rotating-text {
	position: relative;
	max-width: 100%;
	color: var(--color-surface);
	overflow: hidden; /* evita desborde horizontal */
}

/* Tipografía fluida: 2rem móvil → 4rem desktop */
.rotating-text b {
	font-size: clamp(2rem, 5vw, 4rem);
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	max-width: 100%;
	line-height: 1.2;
	vertical-align: top;
	font-weight: 600;
}

/* ← Este era el bug principal:
	 sin position: relative, las .word se posicionan
	 respecto al h1 o al ancestro más cercano,
	 no al wrapper que las contiene */
b.word-wrapper {
	position: relative;        /* contexto para los absolute */
	display: inline-block;
	height: 1.2em;             /* igual al line-height del b */
	min-width: 8ch;            /* ancho mínimo = palabra más larga */
	max-width: 100%;
	vertical-align: bottom;
	overflow: hidden;
}

.rotating-text b .word {
	white-space: nowrap;
	font-size: inherit;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	opacity: 0;
	color: #FB0040;
	max-width: 100%;
}

/* Letras — sin cambios */
.rotating-text b .word .letter {
	transform-origin: center center 25px;
}
.rotating-text b .word .letter.out {
	transform: rotateX(90deg);
	transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.rotating-text b .word .letter.in {
	transition: 0.38s ease;
}
.rotating-text b .word .letter.behind {
	transform: rotateX(-90deg);
}


/* Navbar brand — familia tipográfica */
.navbar-brand span { font-family: var(--font-display); }


/* --------------------------------------------------------------------------
	 RESET DE MÁRGENES EN PRIMEROS HIJOS
	 -------------------------------------------------------------------------- */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
p:first-child {
	margin-top: 0;
}

/* Tablet — el clamp() ya lo resuelve,
	 pero este override da más control fino */
@media (min-width: 768px) and (max-width: 1024px) {
	.rotating-text b {
	  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
	}
}

/* Mobile — mantiene el comportamiento actual */
@media (max-width: 767px) {
	.rotating-text b {
	  font-size: 2.2rem;
	  font-weight: 500;
	  line-height: 1.3;
	}
}