/* ==========================================================================
   Ulrich von Cappeln — MVP Styles (DARK)
   Estructura del archivo (para buscar rápido):
   01. VARIABLES (tokens de color / tipografías / espacios)
   02. BASE + RESET (html/body, links, container)
   03. ACCESIBILIDAD + UTILITARIOS (skip link, smooth scroll)
   04. HEADER + NAV (desktop + mobile hamburger)
   05. HERO (home)
    05.1 HERO — Foto sutil pero perceptible 
    05.2 HERO — Cards con fondo fijo (no afectadas por la imagen)
   06. BOTONES
   07. CARDS + LISTAS
   08. PÁGINAS INTERNAS (base: títulos, prose)
    08.1 LIBROS (bloque Serie Fe)
    08.2 PENSAMIENTOS (carrusel)
   09. ABOUT (sobre mí + foto)
   10. FOOTER (bloque principal + pie inferior)
   11. ESTADOS (helpers)
   12. FONDOS POR SECCIÓN (one-page)
   99) FIX ANTI-BLANCO (seguro, sin forzar dark)
   ========================================================================== */


/* ========================================================================== */
/* 01. VARIABLES (DARK)                                                       */
/* ========================================================================== */
:root{
  /* Fondo (negro suave, no puro) */
  --c-bg: #141414;
  --c-bg-2: #1A1A1A;

  /* Texto (cremas y grises cálidos) */
  --c-text: #F4F1EC;       /* crema suave (principal) */
  --c-text-2: #D8D3CA;     /* gris crema */
  --c-muted: #A8A39A;      /* gris medio cálido */

  /* Bordes */
  --c-border: rgba(244,241,236,.14);

  /* Superficies (cards/paneles) */
  --c-surface: rgba(255,255,255,.06);
  --c-surface-2: rgba(255,255,255,.04);

  /* Sombra (más sutil en dark) */
  --c-shadow: 0 12px 30px rgba(0,0,0,.45);

  /* Tipografías */
  --font-editorial: "Libre Baskerville", serif;
  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Ritmo */
  --radius: 18px;
  --radius-sm: 12px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 64px;

  --container: 1080px;

  /* Focus accesible en dark */
  --focus: 0 0 0 3px rgba(244,241,236,.22);

  /* Header fijo (ajustable) */
  --header-h: 86px;

  /* =========================
     NUEVO: Acentos sutiles (marca)
     ========================= */
  --c-accent: #B89A4F;       /* dorado apagado */
  --c-accent-2: #1F3A5A;     /* azul profundo */
  --c-accent-3: #2E6B57;     /* verde sobrio (opcional) */

  /* =========================
     NUEVO: Base clara editorial (para secciones)
     ========================= */
  --c-page-bg: #F4F1EC;      /* crema suave */
  --c-page-bg-2: #EFEAE3;    /* crema 2 */
  --c-page-surface: #FBFAF7; /* papel cálido */
  --c-page-text: #2E2E2E;    /* negro suave */
  --c-page-muted: rgba(46,46,46,.70);
  --c-page-border: rgba(46,46,46,.12);

  /* Sombra suave para fondo claro */
  --c-shadow-light: 0 10px 26px rgba(0,0,0,.08);

  /* Focus en claro */
  --focus-light: 0 0 0 3px rgba(184,154,79,.30);
}


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

html, body { height: 100%; }

body{
  margin: 0;
  color: var(--c-page-text);
  background:
    radial-gradient(1100px 800px at 18% 8%, rgba(46,46,46,.05), transparent 60%),
    radial-gradient(900px 700px at 84% 0%, rgba(46,46,46,.035), transparent 55%),
    linear-gradient(180deg, var(--c-page-bg) 0%, var(--c-page-bg-2) 100%);
  font-family: var(--font-editorial);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Compensación por header fijo */
  padding-top: var(--header-h);
}

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

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

a:focus-visible,
button:focus-visible{
  outline: none;
  /* Si está sobre fondo oscuro, el focus original funciona.
     En fondo claro, se ve mejor el focus-light. Lo resolvemos abajo por contexto. */
  box-shadow: var(--focus-light);
  border-radius: 10px;
}

::selection{
  background: rgba(184,154,79,.22);
}

/* Layout container */
.l-container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

@media (max-width: 520px){
  .l-container{
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}


/* ========================================================================== */
/* 03. ACCESIBILIDAD + UTILITARIOS                                             */
/* ========================================================================== */

/* Skip link */
.is-hidden-focusable{
  position: absolute;
  top: -40px;
  left: 10px;
  background: rgba(20,20,20,.95);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  padding: 8px 12px;
  z-index: 999;
  border-radius: 10px;
}

.is-hidden-focusable:focus{
  top: 10px;
}

/* Scroll suave + compensación por header fijo */
html { scroll-behavior: smooth; }
section { scroll-margin-top: calc(var(--header-h) + 14px); }


/* ========================================================================== */
/* 04. HEADER + NAV                                                           */
/*    - Modificaciones del header: acá.                                       */
/*    - Menú móvil/hamburguesa: 04.4                                          */
/* ========================================================================== */

/* 04.1 Header fijo */
.c-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  backdrop-filter: blur(10px);
  background: rgba(20,20,20,.92);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}

.c-header a:focus-visible,
.c-header button:focus-visible{
  box-shadow: var(--focus);
}

.c-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* 04.2 Marca */
.c-brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.c-brand__mark{
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,.04);
}

.c-brand__mark img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-brand__text{
  display: grid;
  gap: 2px;
}

.c-brand__name{
  font-family: var(--font-editorial);
  font-size: 16px;
  letter-spacing: .2px;
}

.c-brand__tagline{
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: .2px;
}

/* 04.3 Nav desktop */
.c-nav{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: flex-end;

  background: rgba(255,255,255,.035);
  border: 1px solid rgba(244,241,236,.16);
  padding: 6px;
  border-radius: 999px;
}

.c-nav__link{
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--c-text-2);
  padding: 8px 10px;
  border-radius: 999px;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}

.c-nav__link:hover{
  background: rgba(184,154,79,.10);
}

.c-nav__link.is-active{
  background: rgba(184,154,79,.14);
  color: var(--c-text);
  box-shadow: 0 0 0 1px rgba(184,154,79,.18) inset;
}

/* 04.4 Botón hamburguesa (móvil) */
.c-navToggle{
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,.03);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.c-navToggle:hover{
  background: rgba(255,255,255,.06);
}

.c-navToggle__label{
  color: var(--c-text-2);
}

/* 04.5 Comportamiento mobile */
@media (max-width: 820px){
  .c-header__inner{
    flex-wrap: wrap;
    align-items: center;
  }

  .c-navToggle{
    display: inline-flex;
  }

  .c-nav{
    display: none;
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-top: 1px solid var(--c-border);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    gap: 8px;
    justify-content: flex-start;
  }

  .c-nav.is-open{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .c-nav__link{
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
  }

  .c-nav__link:hover{
    background: rgba(184,154,79,.10);
  }

  .c-nav__link.is-active{
    background: rgba(184,154,79,.14);
    color: var(--c-text);
    border: 1px solid rgba(184,154,79,.22);
  }

}


/* ========================================================================== */
/* 05. HERO (HOME)                                                            */
/* ========================================================================== */
.c-hero{
  position: relative;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  color: var(--c-text);

  /* ✅ FONDO REAL DEL HERO */
  background: linear-gradient(
    180deg,
    var(--c-bg) 0%,
    var(--c-bg-2) 100%
  );
}

.c-hero a:focus-visible,
.c-hero button:focus-visible{
  box-shadow: var(--focus);
}

.c-hero__inner{
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: var(--space-7);
  align-items: start;
}

.c-hero__kicker{
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--c-muted);
  letter-spacing: .2px;
}

.c-hero__title{
  margin: 0 0 var(--space-4) 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: .2px;
}

.c-hero__text{
  margin: 0 0 var(--space-6) 0;
  font-size: 16px;
  color: var(--c-text-2);
  max-width: 64ch;
}

.c-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.c-hero__actions .c-btn{
  border-color: rgba(184,154,79,.55);
}

.c-hero__actions .c-btn:hover{
  border-color: rgba(184,154,79,.85);
}

.c-hero__notes{
  border-top: 1px solid var(--c-border);
  padding-top: var(--space-4);
}

.c-hero__note{
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--c-muted);
}

.c-hero__noteLabel{
  color: var(--c-text-2);
}

.c-hero__panel{
  display: grid;
  gap: var(--space-4);
}

@media (max-width: 920px){
  .c-hero{
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }

  .c-hero__inner{
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Home “template” */
.t-home{
  background: none;
}

.t-home .c-hero{
  padding-top: calc(var(--space-8) + 10px);
  padding-bottom: calc(var(--space-8) + 10px);
}

.t-home .c-hero__title{
  letter-spacing: .25px;
}

.t-home .c-hero__text{
  font-size: 17px;
}

.t-home .c-hero__panel .c-card{
  box-shadow: none;
}


/* ========================================================================== */
/* 05.1 HERO — Opción B (sutil pero perceptible): atmósfera + transición       */
/* ========================================================================== */

/* Importante: NO redefinir background del hero acá.
   El fondo oscuro real ya está en 05 (gradient). */

.c-hero{
  position: relative;
  overflow: hidden;
}

/* Foto de fondo (más oscura, no “lava” el hero) */
.c-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/ulrich-von-cappeln-reflexiva.jpg");
  background-size: cover;
  background-position: 70% 25%;
  filter: grayscale(100%) contrast(.95) brightness(.72); /* antes .55 */
  opacity: .44; /* antes .22 */
  z-index: 0;
  pointer-events: none;
}

/* Capa oscura arriba de la foto (esto es lo que faltaba) */
.c-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20,20,20,.62) 0%,   /* antes .78 */
    rgba(20,20,20,.78) 100%  /* antes .88 */
  );
  z-index: 1;
  pointer-events: none;
}

/* Contenido arriba de TODO */
.c-hero__inner{
  position: relative;
  z-index: 2;
}

@media (max-width: 920px){
  .c-hero::before{
    background-position: 55% 20%;
    opacity: .40;
    filter: grayscale(100%) contrast(.95) brightness(.5);
  }
}

/* ==========================================================
   05.2 HERO — Cards con fondo fijo (no afectadas por la imagen)
   ========================================================== */

/* 05.2 — Cards 100% opacas */
.c-hero__panel .c-card{
  position: relative;
  z-index: 3;

  background: rgba(20,20,20,.78); /* ⬅️ ESTE es el valor clave */
  border: 1px solid rgba(244,241,236,.16);

  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter: none;
  color: var(--c-text);
}


.c-hero__panel .c-card__text{
  color: var(--c-text-2);
}


@media (max-width: 820px){
  .c-hero__panel .c-card{
    background: rgba(20,20,20,.72);
  }
}

/* 05.2 — FIX definitivo: gana incluso contra .t-home */
.t-home .c-hero__panel .c-card{
  background-color: rgba(28,28,28,.38);
  border: 1px solid rgba(244,241,236,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  backdrop-filter: none;
  color: var(--c-text);
}

@media (max-width: 820px){
  .t-home .c-hero__panel .c-card{
    background-color: rgba(28,28,28,.32);
  }
}


/* ========================================================================== */
/* 06. BOTONES                                                                 */
/* ========================================================================== */
.c-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(184,154,79,.55);
  background: rgba(184,154,79,.10);
  padding: 10px 14px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: inherit;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.c-btn:hover{
  transform: translateY(-1px);
  background: rgba(184,154,79,.16);
  border-color: rgba(184,154,79,.75);
  box-shadow: var(--c-shadow-light);
}

.c-btn--ghost{
  background: transparent;
  border-color: rgba(46,46,46,.18);
}

.c-btn--ghost:hover{
  background: rgba(184,154,79,.10);
  border-color: rgba(184,154,79,.55);
}

/* NUEVO: primario (opcional, si querés que el CTA del hero destaque más) */
.c-btn--primary{
  background: rgba(184,154,79,.18);
  border-color: rgba(184,154,79,.85);
}

.c-btn{
  cursor: pointer;
}


/* ========================================================================== */
/* 07. CARDS + LISTAS                                                          */
/* ========================================================================== */
.c-card{
  background: var(--c-page-surface);
  border: 1px solid var(--c-page-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--c-shadow-light);
  color: var(--c-page-text);
}

.c-card--muted{
  position: relative;
}

.c-card--muted::before{
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: rgba(184,154,79,.25);
}

.c-card__title{
  margin: 0 0 var(--space-3) 0;
  font-size: 16px;
  line-height: 1.35;
  color: inherit;
}

.c-card__text{
  margin: 0;
  color: rgba(46,46,46,.78);
}

.c-list{
  margin: 0;
  padding-left: 18px;
}

.c-list li{
  margin: 8px 0;
}

.c-list a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(46,46,46,.28);
}

.c-list a:hover{
  text-decoration-color: rgba(46,46,46,.55);
}

/* Grid genérico de cards (3 columnas desktop, 1 mobile) */
.c-cards__grid{
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* Tablet */
@media (max-width: 980px){
  .c-cards__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px){
  .c-cards__grid{
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}


/* ========================================================================== */
/* 08. PÁGINAS INTERNAS (BASE)                                                  */
/* ========================================================================== */
.c-page{
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  color: var(--c-page-text);
}

.c-page__title{
  margin: 0 0 var(--space-4) 0;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.2;
}

/* Lead editorial, sobrio (no marketing) */
.c-page__lead{
  margin: calc(var(--space-4) * -0.25) 0 var(--space-6) 0;
  font-family: var(--font-editorial);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.55;
  color: var(--c-page-muted);
  max-width: 52ch;
  letter-spacing: .2px;
}

.c-prose{
  max-width: 72ch;
}

.c-prose p{
  margin: 0 0 var(--space-4) 0;
  color: rgba(46,46,46,.82);
  font-size: 16px;
  line-height: 1.7;
}

/* Primer párrafo: arranque más presente */
.c-prose p:first-child{
  color: rgba(46,46,46,.92);
}

/* Párrafos cortos consecutivos: menos “bloque” */
.c-prose p + p{
  margin-top: 2px;
}

/* Cierre con aire (último párrafo) */
.c-prose p:last-child{
  margin-top: var(--space-5);
}

.c-prose h2{
  margin: var(--space-7) 0 var(--space-3) 0;
  font-size: 18px;
  line-height: 1.3;
}

.c-prose h3{
  margin: var(--space-6) 0 var(--space-3) 0;
  font-size: 16px;
  line-height: 1.3;
}

/* Acciones de contacto (mail / X) */
.c-contact__actions{
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Nota editorial inferior (cierres, aclaraciones, silencios) */
.c-page__note{
  margin-top: var(--space-6);
  max-width: 60ch;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(46,46,46,.65);
}


/* ========================================================================== */
/* 08.1 LIBROS (bloque Serie Fe)                                               */
/*    - Ubicar dentro de 08. PÁGINAS INTERNAS (BASE), al final.                */
/* ========================================================================== */

/* Card destacada (mantiene estética del sistema, pero con layout editorial) */
.c-books__feature{
  background: var(--c-page-bg-2);
  box-shadow: none;
}

/* Grid: texto (manda) + imagen (acompaña) */
.c-books__grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--space-7);
  align-items: start;
}

/* Título del bloque (más presente que un título de card común) */
.c-books__feature .c-card__title{
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-editorial);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: .2px;
  color: rgba(46,46,46,.92);
}

/* Subtítulo editorial bajo “Serie Fe” (más visible + aire abajo) */
.c-books__subtitle{
  margin: 0 0 var(--space-6) 0; /* ✅ espacio debajo del subtítulo */
  font-family: var(--font-editorial);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.6;
  color: rgba(46,46,46,.78);
  max-width: 60ch;
  letter-spacing: .15px;
}

/* Prosa dentro del bloque: ritmo levemente más “editorial” */
.c-books__feature .c-prose{
  max-width: 70ch;
}

.c-books__feature .c-prose p{
  margin: 0 0 var(--space-4) 0;
  color: rgba(46,46,46,.82);
  font-size: 16px;
  line-height: 1.7;
}

/* Link principal */
.c-books__link{
  display: inline-flex;
  margin-top: var(--space-4);
}

/* Media acompañante (no protagonista) */
.c-books__media{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.c-books__media img{
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--c-page-border);
  background: rgba(0,0,0,.015);
  opacity: .95;
  filter: saturate(.95) contrast(.99);
}

/* Mobile: apilar, imagen debajo */
@media (max-width: 820px){
  .c-books__grid{
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .c-books__media{
    order: 2;
  }

  .c-books__media img{
    max-width: 520px;
  }
}


/* ========================================================================== */
/* 08.2 PENSAMIENTOS (estilo tipo SerieFe: 1 card + shuffle + copiar)          */
/* ========================================================================== */
.c-thoughtCard{
  max-width: 900px;
  margin: 0 auto;
  background: var(--c-page-surface);
  border: 1px solid var(--c-page-border);
  border-radius: 14px;
  padding: var(--space-6);
  box-shadow: var(--c-shadow-light);
  text-align: center;
}

.c-thoughtCard__text{
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.5;
  color: rgba(46,46,46,.92);
  letter-spacing: .15px;
}

.c-thoughtCard__meta{
  margin-top: var(--space-4);
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(46,46,46,.62);
}

.c-thoughtCard__author{
  font-weight: 600;
  color: rgba(46,46,46,.78);
}

.c-thoughtCard__source{
  font-style: italic;
  font-weight: 700;
  color: rgba(46,46,46,.82);
}

/* ====== NUEVO: cuando la fuente sea link (X), que se vea editorial y sutil ====== */
a.c-thoughtCard__source{
  color: rgba(46,46,46,.86);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(46,46,46,.25);
  transition: text-decoration-color .15s ease, color .15s ease, opacity .15s ease;
}

a.c-thoughtCard__source:hover{
  color: rgba(31,58,90,.95);
  text-decoration-color: rgba(31,58,90,.55);
}

/* Focus accesible (no rompe estética) */
a.c-thoughtCard__source:focus-visible{
  outline: none;
  box-shadow: var(--focus-light);
  border-radius: 8px;
  padding: 2px 6px; /* para que el foco tenga “aire” */
  margin: -2px -6px;
}

.c-thoughtCard__sep{
  opacity: .6;
  margin: 0 .2rem;
}

.c-thoughtCard__where{
  color: rgba(46,46,46,.62);
}

.c-thoughtCard__actions{
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* ========================================================================== */
/* 08.3 Links editoriales (flecha) — coherentes con el hero                   */
/* - Para: .c-link.c-link--arrow (ej. “→ Leer más sobre la Serie Fe”)         */
/* ========================================================================== */
/* base por si .c-link se usa en otros lados */
.c-link{
  color: inherit;
  text-decoration: none;
}

/* el “→ Leer más…” de Libros */
.c-link--arrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  /* igual que el hero: subrayado sutil */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(46,46,46,.30);

  transition: text-decoration-color .15s ease;
}

/* hover: solo oscurece la línea (como en el hero) */
.c-link--arrow:hover{
  text-decoration-color: rgba(46,46,46,.60);
}

/* focus accesible (no toca color de texto) */
.c-link--arrow:focus-visible{
  outline: none;
  box-shadow: var(--focus-light);
  border-radius: 8px;
  padding: 2px 6px;
  margin: -2px -6px;
}


/* ========================================================================== */
/* 09. ABOUT (SOBRE MÍ + FOTO)                                                  */
/*    - Si hay que tocar la foto (mobile/recorte): acá.                         */
/* ========================================================================== */
.c-about{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-8);
  align-items: start;
}

/* Contenedor de media controlado */
.c-about__media{
  width: 100%;
  max-width: 260px;
}

.c-about__media img{
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--c-page-border);
  background: var(--c-page-surface);
  display: block;
}

/* Mobile: proporción estética fija + recorte sin deformar */
@media (max-width: 820px){
  .c-about{
    grid-template-columns: 1fr;
  }

  .c-about__media{
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    justify-content: center
  }

  .c-about__media img{
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 22%;
    max-width: 260px;
  }
}


/* ========================================================================== */
/* 10. FOOTER                                                                  */
/*    - Ajustes del pie (íconos, layout, botón “subir”): acá.                   */
/* ========================================================================== */
.c-footer{
  border-top: 1px solid rgba(244,241,236,.14);
  background: rgba(20,20,20,.92); /* igual al header */
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  color: var(--c-text);
}

.c-footer a:focus-visible,
.c-footer button:focus-visible{
  box-shadow: var(--focus);
}

.c-footer__inner{
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: var(--space-6);
  align-items: start;
}

.c-footer__text{
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--c-text-2);
}

.c-footer__muted{
  color: var(--c-muted);
}

.c-footer__link{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(244,241,236,.30);
}

.c-footer__link:hover{
  text-decoration-color: rgba(244,241,236,.60);
}

/* Bloque central (si lo estás usando) */
.c-footer__center{
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
  padding-top: var(--space-6);
}

/* ====== NUEVO: layout del bloque principal del footer (brand | social | dev) ====== */
.c-footer__centerGrid{
  /* mantenemos la base de .c-footer__center, pero lo convertimos en grid de 3 columnas */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: stretch; /* permite alinear izq/der dentro de cada celda */
  gap: var(--space-6);
}

/* Izquierda: favicon + textos */
.c-footer__brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.c-footer__favicon{
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 4px; /* sutil, por si el jpg tiene bordes */
}

.c-footer__brandText{
  display: grid;
  gap: 4px;
}

/* Nombre arriba del © */
.c-footer__author{
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--c-text-2);
}

/* Centro: redes */
.c-footer__social{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.c-footer__socialLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,.03);
  color: var(--c-text-2);
  text-decoration: none;
  opacity: .95;
}

.c-footer__socialLink:hover{
  background: rgba(255,255,255,.06);
  color: var(--c-text);
  opacity: 1;
}

.c-footer__socialLink i{
  font-size: 14px;
  opacity: .90;
}

/* Derecha: desarrollado por */
.c-footer__dev{
  text-align: right;
  display: grid;
  justify-items: end;
}

/* ícono dentro de textos (si aplica) */
.c-footer__text i{
  margin-right: 10px;
  opacity: .85;
}

/* CTA de contacto (si lo estás usando) */
.c-footer__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--c-text-2);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,.03);
}

.c-footer__cta:hover{
  background: rgba(255,255,255,.06);
  color: var(--c-text);
}

/* Pie real inferior */
.c-footer__bottom{
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.c-footer__fineprint{
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--c-muted);
}

.c-footer__top{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--c-text-2);
  opacity: .95;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,.03);
}

.c-footer__top:hover{
  background: rgba(255,255,255,.06);
  opacity: 1;
}

@media (max-width: 820px){
  .c-footer__inner{
    grid-template-columns: 1fr;
  }

  /* ====== NUEVO: apilar bloque principal del footer en mobile ====== */
  .c-footer__centerGrid{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 14px;
  }

  .c-footer__brand{
    justify-content: center;
    text-align: center;
  }

  .c-footer__dev{
    justify-items: center;
    text-align: center;
  }

  .c-footer__bottom{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Marca desarrollador */
.c-footer__brandDev{
  font-weight: 600; /* negrita elegante, no pesada */
  color: var(--c-text-2);
}

.c-footer__reg{
  font-size: 10px;
  vertical-align: super;
  margin-left: 1px;
  opacity: .75;
}


/* ========================================================================== */
/* 11. ESTADOS (helpers)                                                       */
/* ========================================================================== */
.is-hidden{ display: none !important; }


/* ========================================================================== */
/* 12. FONDOS POR SECCIÓN (one-page)                                          */
/* ========================================================================== */

/* 12.1) Fondo global: claro editorial */
body{
  background: linear-gradient(180deg, var(--c-page-bg) 0%, var(--c-page-bg-2) 100%);
  color: var(--c-page-text);
}

/* 12.2) Padding consistente para secciones (NO hero) */
main > section{
  padding: var(--space-8) 0;
}

/* 12.2.1) HERO es independiente: no tocar fondo acá */
main > section.c-hero{
  padding: 0;  /* el hero maneja su propio padding */
  border: 0;
  /* ❌ NO background aquí */
}

/* 12.3) Alternancia clara por sección (EXCLUYE hero) */
main > section:not(.c-hero):nth-of-type(odd){
  background: rgba(255,255,255,.35);
}
main > section:not(.c-hero):nth-of-type(even){
  background: rgba(0,0,0,.015);
}

/* 12.4) Primera sección: no forzar background (y no tocar hero) */
main > section:first-of-type{
  background: transparent;
}

/* 12.5) Separador sutil entre secciones */
main > section + section{
  border-top: 1px solid var(--c-page-border);
}

/* 12.5.1) EXCEPCIÓN: no separar hero de la sección siguiente */
.c-hero + section{
  border-top: 0 !important;
}

/* 12.6) Mobile: menos alto */
@media (max-width: 820px){
  main > section{
    padding: var(--space-7) 0;
  }
}


/* ========================================================================== */
/* 99) FIX ANTI-BLANCO (seguro)                                               */
/* Evita blancos puros accidentales sin forzar dark global.                   */
/* ========================================================================== */

html{
  background: var(--c-page-bg);
}

main{
  background: transparent;
}

/* ✅ IMPORTANTE:
   Eliminamos el background-color: transparent global,
   porque estaba anulando los fondos alternados del punto 12.
*/