:root {
  --clr-off-white: #faf9f6;
  --clr-soft-grey: #d2d2cf;
  --clr-primary: #E1283C;
  --clr-secondary: #25BBDF;
  --clr-surface-1: #D8F1A0;
  --clr-surface-2: #FE5E41;
  --clr-surface-3: #25BBDF;
  --clr-fixed-clear: #ffffff;
  --clr-fixed-dark: #000000;

  --ff-primary: "favoritregular", sans-serif;
  --ff-primary-italic: "favorititalic", sans-serif;
  --ff-secondary: "favorit_liningregular", sans-serif;
  --ff-secondary-italic: "favorit_liningitalic", sans-serif;
}

/* ---------- VALORES PARA MÓVILES (Pantallas de menos de 768px) -*/
@media (max-width: 767px) {

  :root {
    --fs-normal: clamp(15px, 1.822916667vw, 70px);
    /*35px;*/
    --lh-normal: 1.286;
    /*45px;clamp(23px, 2.34375vw, 90px)*/
    --lh-one: 1;
    --space-xxxxs: 0.3906250005vw;
    /*5px; x 1.5 */
    --space-xxxs: 0.7812499995vw;
    /*10px;*/
    --space-xxs: 1.5625000005vw;
    /*20px;*/
    --space-xs: 2.34375vw;
    /*30px;*/
    --space-s: 3.1249999995vw;
    /*40px;*/
    --space-m: 3.9062500005vw;
    /*50px;*/
    --space-l: 4.6875vw;
    /*60px;*/
    --space-xl: 5.859375vw;
    /*75px;*/
    --space-xxl: 6.2500000005vw;
    /*80px;*/
    --space-xxxl: 7.03125vw;
    /*90px;*/
    --space-xxxxl: 7.8124999995vw;
    /*100px;*/
  }
}

/* ---------- GLOBAL DESIGN TOKENS (Anclado perfectamente desde iPad Mini hasta 4K TV) */
@media (min-width: 768px) {

  :root {

    --fs-normal: clamp(16px, 1.822916667vw, 70px);
    /*35px;*/
    --lh-normal: 1.286;
    /*45px;clamp(23px, 2.34375vw, 90px)*/
    --lh-one: 1;
    --space-xxxxs: 0.260416667vw;
    /*5px; * */
    --space-xxxs: 0.520833333vw;
    /*10px;*/
    --space-xxs: 1.041666667vw;
    /*20px;*/
    --space-xs: 1.5625vw;
    /*30px;*/
    --space-s: 2.083333333vw;
    /*40px;*/
    --space-m: 2.604166667vw;
    /*50px;*/
    --space-l: 3.125vw;
    /*60px;*/
    --space-xl: 3.90625vw;
    /*75px;*/
    --space-xxl: 4.166666667vw;
    /*80px;*/
    --space-xxxl: 4.6875vw;
    /*90px;*/
    --space-xxxxl: 5.208333333vw;
    /*100px;*/
  }
}


/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 21, 2026 */
@font-face {
  font-family: 'favorit_liningregular';
  src: url('../fonts/favoritlining-regular-webfont.woff2') format('woff2'),
    url('../fonts/favoritlining-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'favorit_liningitalic';
  src: url('../fonts/favoritlining-regularita-webfont.woff2') format('woff2'),
    url('../fonts/favoritlining-regularita-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'favoritregular';
  src: url('../fonts/favorit-regular-webfont.woff2') format('woff2'),
    url('../fonts/favorit-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'favorititalic';
  src: url('../fonts/favorit-regularita-webfont.woff2') format('woff2'),
    url('../fonts/favorit-regularita-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100dvh;
  text-rendering: optimizeSpeed;
  line-height: var(--lh-normal);
}

/* A elements that don't have a class get default styles 
a:not([class]) {
  text-decoration-skip-ink: auto;
}*/

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

img.fit,
video.fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

img.cover,
video.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

button {
  font-family: var(--ff-primary);
  line-height: var(--lh-one);
  padding: var(--space-xs) var(--space-xl);
  border-radius: 9999px;
  border: none;
  width: fit-content;
  margin-inline: auto;
  background-color: var(--clr-fixed-dark);
  color: var(--clr-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* CRÍTICO PARA ANDROID: Desactiva el recorte inteligente de líneas */
  text-decoration-skip-ink: none !important;
  -webkit-text-decoration-skip-ink: none !important;
  /* Obliga a re-ubicar la decoración de texto en una posición estándar */
  text-underline-position: under !important;
  text-underline-offset: 1px !important;
  /* Ajusta este valor en em o px si es necesario */
}

button:hover {
  background-color: var(--clr-fixed-clear);
}

a.button {
  color: var(--clr-fixed-clear);
  background: var(--clr-fixed-dark);
  font-size: clamp(16px, 0.9375vw, 57px);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: all .3s ease;
  padding: 0 1.5em;
  line-height: clamp(40px, 2.2916666vw, 2.2916666vw);
  border-radius: 1.375em;
  display: block;
  width: fit-content;
  margin-top: 1.5em;
}

a.button:hover {
  background: var(--clr-secondary);
  transition: all .3s ease;
}

a.button:focus {
  text-decoration: none;
  text-decoration-thickness: 0.07lh;
  text-underline-offset: 0.17lh;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- BASE STYLES -----------------------------------------------------------------------------------------*/

body {
  max-width: 100%;
  font-family: var(--ff-primary);
  font-size: var(--fs-normal);
  font-optical-sizing: auto;
  color: var(--clr-fixed-clear);
  background-color: var(--clr-fixed-dark);
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
  /*opacity: 0;*/
  /* Wil de set to 1 when the page is fully loaded, for a fade-in effect */
  text-wrap: pretty;
}

html {
  max-width: 100%;
  overflow-x: hidden;
}

html body.crop {
  height: 100dvh;
  overflow: hidden;
}

h1,
h3 {
  font-family: var(--ff-primary);
}

h2,
h4,
h5,
h6 {
  font-weight: normal;
}

b {
  font-weight: 600;
}

em,
i {
  font-family: var(--ff-primary-italic);
}

.flex {
  display: flex;
  gap: var(--gap, 1rem);
}

.flow>*:where(:not(:first-child)) {
  margin-top: var(--flow-spacer, .5em);
}








/* La animación base para todo el sitio */
header,
.fade-in-entry {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;

  /* ESTA es la línea clave: lee el delay personalizado de cada elemento */
  animation-delay: var(--delay, 0s);
}

.main-wrapper {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;

  /* ESTA es la línea clave: lee el delay personalizado de cada elemento */
  animation-delay: var(--delay, .5s);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}








/* ---------- SPLASH PAGE */

#splash-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition:
    opacity .6s ease,
    transform .6s ease-out,
    visibility .6s;
}

#splash-page.fade-out {
  opacity: 0;
  transform: translateY(-120%);
  visibility: hidden;
  pointer-events: none;
}


/* imagen */

#splash-image-container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

#splash-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* loading */

.splash-loading {
  position: absolute;
  top: 66.666%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .65;
  transition: opacity .4s ease;
}

.splash-loading span {
  opacity: 0;
  animation: splash-dot 1.2s infinite;
}

.splash-loading span:nth-child(1) {
  animation-delay: 0s;
}

.splash-loading span:nth-child(2) {
  animation-delay: .2s;
}

.splash-loading span:nth-child(3) {
  animation-delay: .4s;
}

@keyframes splash-dot {

  0%,
  20% {
    opacity: 0;
  }

  40%,
  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

#splash-page.is-loaded .splash-loading {
  opacity: 0;
  pointer-events: none;
}


/* bola desktop */

.splash-enter {
  position: fixed;
  top: 0;
  left: 0;

  width: 88px;
  height: 88px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: #fff;
  mix-blend-mode: difference;
  font: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;

  opacity: 0;
  pointer-events: none;

  will-change: transform;

  transition:
    opacity .4s ease,
    background-color .25s ease,
    scale .25s ease;
}

#splash-page.is-loaded .splash-enter {
  opacity: 1;
  pointer-events: auto;
}

.splash-enter:hover {
  background: rgba(255, 255, 255, .25);
}


/* desktop con mouse */

@media (pointer: fine) {

  #splash-page.is-loaded {
    cursor: none;
  }

  #splash-page.is-loaded .splash-enter {
    cursor: none;
  }

}


/* touch */

@media (pointer: coarse) {

  .splash-enter {
    display: none;
  }

  #splash-page.is-loaded {
    cursor: pointer;
  }

}

/* ---------- END OF SPLASH PAGE */







.main-wrapper {
  background: var(--clr-fixed-dark);
  max-width: 100%;
  position: relative;
  height: 100%;
  overflow-y: auto;
  /* Permite el scroll con la rueda del ratón */
  /* Para Firefox */
  scroll-behavior: smooth;
}

.home .main-wrapper {
  background: var(--clr-fixed-dark);
  max-width: 100%;
  position: relative;
  height: 100%;
  overflow-y: auto;
  /* Permite el scroll con la rueda del ratón */

  /* Opcional: Oculta la barra de scroll visual en .main-wrapper */
  scrollbar-width: none;
  /* Para Firefox */
  scroll-behavior: smooth;
}

.home .main-wrapper::-webkit-scrollbar {
  display: none;
}

article {
  scroll-margin-top: 200px;
  /* para evitar que al hacer clic el artículo quede bajo el header */

  display: flex;
  flex-direction: column;
  gap: var(--space-xxxl);
}

.fake-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  width: 1rem;
  gap: 1px;
  background: var(--clr-fixed-dark);
  z-index: 300;
}

.fake-menu a {
  display: block;
  width: 1rem;
  background: var(--clr-fixed-clear);
}

.fake-menu a.active {
  background: var(--clr-fixed-dark);
}

@media (max-width: 768px) {
  .fake-menu {

    width: 14px;
  }

  .fake-menu a {
    width: 14px;

  }

  .fake-menu a:hover {
    background: var(--clr-fixed-dark);
  }

  .fake-menu a.active {
    background: var(--clr-fixed-dark);
  }
}

@media (max-width: 560px) {
  .fake-menu {

    width: 10px;
  }

  .fake-menu a {
    width: 10px;

  }
}



/* HEADER ----------------------------------------------------------------------------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--clr-fixed-clear);
  font-size: 35px;
  font-size: var(--fs-normal);
  line-height: var(--lh-normal);
  mix-blend-mode: difference;
}

.header-brand {
  font-family: var(--ff-primary);
  text-transform: uppercase;
  /* Fuerza al navegador a activar las ligaduras y el subrayado contextual */
  font-feature-settings: "liga" on, "calt" on, "ss01" on;
  display: flex;
  padding: var(--space-xs) var(--space-xl);
  align-self: stretch;
  align-items: center;
  justify-content: start;
  z-index: 4;
}

header a {
  font-family: var(--ff-primary);
  display: block;
  position: relative;
  top: 0;

  align-self: stretch;
  text-decoration: none;
  color: var(--clr-fixed-clear);
  font-feature-settings: "ss02" on;
  /* Activa los primeros sets estilísticos */
  /*font-variant-numeric: tabular-nums; /* Opcional: si deseas mantener alineación limpia */
}

header a:hover {
  font-family: var(--ff-secondary);
  /* Fuerza al navegador a activar las ligaduras y el subrayado contextual */
  font-feature-settings: "liga" on, "calt" on;
  display: block;
  position: relative;
  /* Pulls the element down 1px relative to its normal position */
  top: 1px;
  /* CRÍTICO PARA ANDROID: Desactiva el recorte inteligente de líneas */
  text-decoration-skip-ink: none !important;
  -webkit-text-decoration-skip-ink: none !important;
  /* Obliga a re-ubicar la decoración de texto en una posición estándar */
  text-underline-position: under !important;
  text-underline-offset: 1px !important;
  /* Ajusta este valor en em o px si es necesario */
  font-feature-settings: "ss02" on;
  /* Activa los primeros sets estilísticos */
  /*font-variant-numeric: tabular-nums; /* Opcional: si deseas mantener alineación limpia */
}

header a.active {
  font-family: var(--ff-secondary);
  /* Fuerza al navegador a activar las ligaduras y el subrayado contextual */
  font-feature-settings: "liga" on, "calt" on;
  display: block;
  position: relative;
  top: 1px;
  /* CRÍTICO PARA ANDROID: Desactiva el recorte inteligente de líneas */
  text-decoration-skip-ink: none !important;
  -webkit-text-decoration-skip-ink: none !important;
  /* Obliga a re-ubicar la decoración de texto en una posición estándar */
  text-underline-position: under !important;
  text-underline-offset: 1px !important;
  /* Ajusta este valor en em o px si es necesario */
}

header a:focus {
  text-decoration: none;
  text-decoration-thickness: 0.07lh;
  text-underline-offset: 0.17lh;
  color: var(--clr-fixed-clear);
}

@media (max-width: 767px) {
  header a {
    font-family: var(--ff-primary);
    display: block;
    position: relative;
    top: 0;

    align-self: stretch;
    text-decoration: none;
    color: var(--clr-fixed-clear);
  }

  header a:hover {
    font-family: var(--ff-secondary);
    /* Fuerza al navegador a activar las ligaduras y el subrayado contextual */
    font-feature-settings: "liga" on, "calt" on;
    display: block;
    position: relative;
    /* Pulls the element down 1px relative to its normal position */
    top: 1px;
    /* CRÍTICO PARA ANDROID: Desactiva el recorte inteligente de líneas */
    text-decoration-skip-ink: none !important;
    -webkit-text-decoration-skip-ink: none !important;
    /* Obliga a re-ubicar la decoración de texto en una posición estándar */
    text-underline-position: under !important;
    text-underline-offset: 1px !important;
    /* Ajusta este valor en em o px si es necesario */
  }

  header a.active {
    font-family: var(--ff-secondary);
    /* Fuerza al navegador a activar las ligaduras y el subrayado contextual */
    font-feature-settings: "liga" on, "calt" on;
    display: block;
    position: relative;
    top: 1px;
    /* CRÍTICO PARA ANDROID: Desactiva el recorte inteligente de líneas */
    text-decoration-skip-ink: none !important;
    -webkit-text-decoration-skip-ink: none !important;
    /* Obliga a re-ubicar la decoración de texto en una posición estándar */
    text-underline-position: under !important;
    text-underline-offset: 1px !important;
    /* Ajusta este valor en em o px si es necesario */
  }
}

.header-brand span {
  display: inline-block;
  /* Reemplazamos inline por inline-block para poder animar el ancho */
  max-width: 150px;
  /* Un ancho máximo estimado para que quepan "ichael" y "rado" */
  opacity: 1;
  letter-spacing: 0em;
  transition:
    max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    letter-spacing 0.4s ease;
  vertical-align: bottom;
  /* Evita que las letras salten de línea durante la animación */
}

/* Estado cuando el usuario hace scroll */
.active .header-brand span {
  max-width: 0;
  opacity: 0;
  letter-spacing: -0.5em;
  /* Comprime las letras hacia adentro mientras desaparecen */
  pointer-events: none;
  /* Evita que el usuario pueda interactuar con el texto invisible */
}

.header-content {
  display: flex;
  padding: var(--space-xs) var(--space-m);
  align-self: stretch;
  align-items: center;
  justify-content: center;
  flex: 3;
  gap: calc(var(--space-xxxxl) + var(--space-xs));
}

.header-bio {
  display: flex;
  padding: var(--space-xs) var(--space-xl);
  align-self: stretch;
  align-items: center;
  justify-content: end;
  /*flex: 1;*/
}







.content-feed {
  width: 66.666666%;
  margin-inline: auto;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  /* Suma el alto dinámico del header más tu separación fluida */
  padding-block: calc(var(--header-height) + var(--space-l));
  gap: var(--space-xxxl);
}

@media (max-width: 768px) {
  .content-feed {
    width: 82%;
  }
}

@media (max-width: 560px) {
  .content-feed {
    width: calc(100% - var(--space-xl));
  }
}

.content-feed img {
  width: 100%;
  height: auto;
}

.content-lecturas {
  align-items: start;
  display: flex;
  flex-direction: column;
  /* Suma el alto dinámico del header más tu separación fluida */
  padding-top: calc(var(--header-height) *1.6);
  padding-bottom: calc(var(--header-height) *2.857);
  padding-inline: var(--space-xl);
  gap: var(--space-s);
  font-family: var(--ff-primary);
  font-size: 35px;
  font-size: var(--fs-normal);
  line-height: var(--lh-normal);
}

[class*="content-"] div.narrow {
  max-width: 29.8em;
}

[class*="content-"] h4 {
  font-family: var(--ff-secondary);
  /* CRÍTICO PARA ANDROID: Desactiva el recorte inteligente de líneas */
  text-decoration-skip-ink: none !important;
  -webkit-text-decoration-skip-ink: none !important;
  /* Obliga a re-ubicar la decoración de texto en una posición estándar */
  text-underline-position: under !important;
  text-underline-offset: 1px !important;
  /* Ajusta este valor en em o px si es necesario */
  margin-block: 1em;
  text-transform: uppercase;
}

.lista {
  max-width: 32em;
  text-wrap: pretty;
  font-feature-settings: "ss02" on, "ss01" on;
  /* Activa los primeros sets estilísticos */
  /*font-variant-numeric: tabular-nums; /* Opcional: si deseas mantener alineación limpia */
}

.lista p {
  display: flex;
  gap: var(--space-l);
  width: 100%;
}

.lista p span {
  display: inline-block;
  min-width: 2.5em;
  font-variant-numeric: tabular-nums;
  /* Hace que todos los números midan lo mismo */
  /*flex:1;*/
}

.lista a {
  display: inline-block;
  align-self: stretch;
  font-family: var(--ff-primary);
  text-decoration: none;
  color: var(--clr-fixed-clear);
  flex: 3;
  position: relative;
  top: 0;
}

.content-bio .lista a {
  display: inline-block;
  align-self: stretch;
  font-family: var(--ff-primary);
  text-decoration: none;
  color: var(--clr-fixed-clear);
  flex: 6;
  position: relative;
  top: 0;
}

.lista a:hover {
  font-family: var(--ff-secondary);
  /* Pulls the element down 1px relative to its normal position */
  /* CRÍTICO PARA ANDROID: Desactiva el recorte inteligente de líneas */
  text-decoration-skip-ink: none !important;
  -webkit-text-decoration-skip-ink: none !important;
  /* Obliga a re-ubicar la decoración de texto en una posición estándar */
  text-underline-position: under !important;
  text-underline-offset: 1px !important;
  /* Ajusta este valor en em o px si es necesario */
  top: 1px;
  letter-spacing: -0.0015em;
  text-decoration-skip-ink: none !important;
  -webkit-text-decoration-skip-ink: none !important;
  text-underline-position: under !important;
  text-underline-offset: 1px !important;
}

/* ---------- VALORES PARA MÓVILES (Pantallas de menos de 768px) -*/
@media (max-width: 767px) {}

.content-publi {
  width: 90%;
  margin-inline: auto;
  align-items: start;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-height) * 1.6);
  padding-bottom: calc(var(--header-height) * 2.857);
  gap: var(--space-xxxl);
}

.publi {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;

}

.publi-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxxl);
  flex: 1;
  width: 100%;
}

.publi-media img {
  width: 32.8125vw;
  max-width: 32.8125vw;
  height: auto;
  border-radius: 0;
  height: auto;
}

.publi-media iframe {
  width: 32.8125vw;
  max-width: 32.8125vw;
  height: auto;
  border-radius: 0;
  height: auto;
}

.publi-media iframe {
  height: 32.8125vw;
}

.publi-text {
  display: flex;
  justify-content: center;
  position: sticky;
  top: calc(var(--header-height) + var(--space-l));
  flex: 1;
  opacity: 1;
  transition: opacity .35s ease;
}

.publi-text.is-hidden {
  opacity: 0;
}


.publi-text p {
  max-width: 18em;
}

.publi-text a {
  max-width: 18em;
  word-break: break-all;
}

.publi-text p span {
  font-family: var(--ff-secondary);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .content-publi {
    width: 100%;
    padding-inline: var(--space-xl);
  }


  .publi {
    flex-direction: column-reverse;
    gap: var(--space-xxxl);
  }

  .publi-media iframe {
    width: 80%;
    max-width: 80%;
    height: auto;
    border-radius: 0;
    height: auto;
  }

  .publi-media img {
    width: 80%;
    max-width: 80%;
  }

  .publi-text {
    display: flex;
    position: static;
    top: auto;
    width: 100%;
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .publi-text p {
    max-width: none;
  }
}






































.content-bio {
  align-items: start;
  display: flex;
  flex-direction: column;
  /* Suma el alto dinámico del header más tu separación fluida */
  padding-block: calc(var(--header-height) + var(--space-l));
  padding-inline: var(--space-xl);
  gap: var(--space-xl);
  font-family: var(--ff-primary);
  font-size: var(--fs-normal);
  line-height: var(--lh-normal);
}

.narrow a {
  color: inherit;
  font-family: var(--ff-secondary);
  text-decoration: none;
  font-feature-settings: "ss02" on;
  /* Activa los primeros sets estilísticos */
  /*font-variant-numeric: tabular-nums; /* Opcional: si deseas mantener alineación limpia */
}


[class*="content-"] p {
  margin-bottom: 1em;
}

[class*="content-"] p:last-child {
  margin-bottom: 0;
}

.content-exped {
  width: 90%;
  margin-inline: auto;
  align-items: start;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-height) * 1.6);
  padding-bottom: calc(var(--header-height) * 2.857);
  gap: var(--space-xxxl);
}

@media (max-width: 768px) {
  .content-exped {
    width: 100%;
    padding-inline: var(--space-xl);
  }
}

.exped-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.exped-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);

}

.exped-media img {
  width: 100%;
}



/* 3. The Aspect Ratio Magic */
.media-wrapper img.w16-9,
.media-wrapper video.w16-9 {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Rules the aspect ratio uniformly */
  object-fit: cover;
  /* Prevents image/video distortion */
  border-radius: 8px;
  /* Optional: rounds the corners of your media */
  background-color: #000;
  /* Fallback color while video/image loads */
}

video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: none;
  border-radius: 8px;
  background-color: #000;
}

iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
}

iframe {
  position: relative;
  z-index: 9999;
  pointer-events: auto !important;
}











/* 1. Forzamos al picture a comportarse como un bloque con dimensiones */
picture.media-wrapper {
  display: block;
  width: 100%;
  background-color: #f0f0f0;
  /* Color de fondo opcional mientras carga */
}

/* 2. Bloqueamos las proporciones en móvil */
@media (max-width: 767px) {

  picture.media-wrapper,
  picture.media-wrapper img {
    /* Si elegiste 4:5 en Squoosh para móvil, ponlo aquí de forma estricta */
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    height: 100%;
    object-fit: cover;
  }
}

/* 3. Bloqueamos las proporciones en iPad, Escritorio y TV 4K */
@media (min-width: 768px) {

  picture.media-wrapper,
  picture.media-wrapper img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    height: 100%;
    object-fit: cover;
  }
}




@media (max-width: 767px) {
  .header-content {
    display: none;
  }

  .mobile-dock {
    position: fixed;
    bottom: var(--space-l);
    left: var(--space-xl);
    right: var(--space-xl);
    display: flex;
    gap: var(--space-xs);
    justify-content: space-between;
    padding: var(--space-xxxs) 0;
    mix-blend-mode: difference;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    z-index: 100;
  }

  .dock-item {
    font-family: var(--ff-primary);
    font-size: 14px;
    color: var(--clr-fixed-dark);
    text-decoration: none;
    padding: var(--space-xxxxs) 0;
    display: inline-block;
    position: relative;
    top: 0;
    color: #ffffff;
  }

  /* Aplicamos el truco que descubrimos para tu fuente Favorit Lining */
  .dock-item.active,
  .dock-item:hover,
  .dock-item:active {
    font-family: var(--ff-secondary);
    top: 1px;
    /* Cancela el salto de píxel */
    /* CRÍTICO PARA ANDROID: Desactiva el recorte inteligente de líneas */
    text-decoration-skip-ink: none !important;
    -webkit-text-decoration-skip-ink: none !important;
    /* Obliga a re-ubicar la decoración de texto en una posición estándar */
    text-underline-position: under !important;
    text-underline-offset: 1px !important;
    /* Ajusta este valor en em o px si es necesario */
  }
}

/* En iPad y 4K TV ocultas este dock y usas tu fila normal en el header */
@media (min-width: 768px) {
  .mobile-dock {
    display: none;
  }
}





#contactModal {
  background: var(--clr-primary);
  color: var(--clr-fixed-dark);
  border: 0;
  border-radius: var(--space-xs);
  font-size: var(--fs-normal);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
}

.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  align-self: flex-end;
  background: var(--clr-fixed-dark);
  height: var(--space-l);
  width: var(--space-l);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
}

.close-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 66%;
  height: 2px;
  background: var(--clr-primary);
  transform: translateX(-50%) rotate(45deg);
}

.close-btn span:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 66%;
  height: 2px;
  background: var(--clr-primary);
  transform: translateX(-50%) rotate(-45deg);
}

#contactModal form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}


#contactModal *:focus {
  outline: none;
  border: 0;
}

#contactModal h2 {
  line-height: 1.1;
}

#contactForm {
  padding-block: var(--space-s);
}

#contactModal input[type=text],
#contactModal input[type=email],
#contactModal textarea {
  width: 25em;
  margin: 0;
  height: 53px;
  height: 2.760416667vw;
  box-sizing: border-box;
  border: none;
  border: 0;
  background: var(--clr-fixed-dark);
  padding: var(--space-m) var(--space-xs);

  color: var(--clr-fixed-clear) !important;
  display: block;
  clear: both;
}

#contactModal label#message {
  width: 100%;
  padding-top: 30px;

  font-weight: 100;
  color: var(--clr-fixed-dark) !important;

  text-align: left;
  line-height: 1.2;
}

#contactModal textarea {
  width: 100%;
  height: fit-content;
  padding: var(--space-m) var(--space-xs);
}

#contactModal input[type=email] {
  margin-top: 0;
}

#contactModal input[type=button],
#contactModal input[type=submit],
#contactModal input[type=reset] {
  background-color: var(--clr-fixed-dark);
  padding: var(--space-m) var(--space-xs);

  color: var(--clr-primary) !important;
  height: fit-content;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

#contactModal input[type=button]:hover,
#contactModal input[type=submit]:hover,
#contactModal input[type=reset]:hover {
  background-color: var(--clr-fixed-dark);
  color: var(--clr-primary) !important;
  padding: var(--space-m) var(--space-xs);
  height: fit-content;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

.back-to-readings {
  display: block;
  width: fit-content;
  margin: var(--space-xl) auto 0;
  padding-left: 1em;
  font-size: var(--fs-action);
  text-decoration: none;
  color: inherit;
}

.back-to-readings:hover::after {
  content: "Volver a lecturas";
  display: inline-block;
  max-width: max-content;
  width: fit-content;
  white-space: nowrap;
  opacity: 1;
  letter-spacing: 0em;
  padding: 0 0.5em;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, letter-spacing 0.4s ease;
  vertical-align: bottom;
}

.back-to-readings::after {
  content: "Volver a lecturas";

  padding: 0 0.5em;
  pointer-events: none;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, letter-spacing 0.4s ease;
}

footer {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: calc(var(--space-xxxxl)*2) var(--space-xs) var(--space-xs);
  overflow: hidden;
}

.footer-content {
  padding-block: var(--space-xs);
  border-top: var(--clr-soft-grey) 1px solid;
  flex: 1;
  max-width: 90%;
}

.footer-content a {

  color: inherit;
  text-decoration: none;
  font-family: var(--ff-secondary);
}

.footer-image {
  position: absolute;
  top: 0;
  right: 0;
  width: max(25vw, 250px);
  height: 100%;
  background: url(../img/bemba.png);
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;

  /* animUp */
  transform: translateY(20%);

  transition:
    transform 1s ease,
    opacity .7s ease;
}

.footer-image.is-visible {
  transform: translateY(0);
}

@media (max-width: 560px) {
  footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;

    padding: 0 var(--space-xl) max(25vw, 250px);
  }

  .footer-content {
    padding-block: calc(var(--space-xxxxl)*2);
    padding-bottom: calc(var(--space-xxxxl)*2);
    /*border-top: 0;
    border-bottom: var(--clr-soft-grey) 1px solid;*/
    flex: 1;
    max-width: 100%;
  }

  .footer-image {
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;
    width: max(25vw, 250px);
    height: max(25vw, 250px);
    background: url(../img/bemba.png);
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
  }
}




::-webkit-scrollbar {
  width: 1rem;
  height: 1rem;
  z-index: 1000000000;
}

::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

::-webkit-scrollbar-thumb {
  background: var(--clr-fixed-dark);
  border: 0px none var(--clr-fixed-dark);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--clr-fixed-dark);
}

::-webkit-scrollbar-thumb:active {
  background: var(--clr-fixed-dark);
}

::-webkit-scrollbar-track {
  background: var(--clr-fixed-clear);
  border: 0px none var(--clr-fixed-clear);
  border-radius: 0;
}

::-webkit-scrollbar-track:hover {
  background: var(--clr-fixed-clear);
}

::-webkit-scrollbar-track:active {
  background: var(--clr-fixed-clear);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: .9rem;
    height: .9rem;
  }
}

@media (max-width: 560px) {
  ::-webkit-scrollbar {
    width: .7rem;
    height: .7rem;
  }
}