/* ==========================================================================
   ESTILOS PRINCIPALES: TENDENCIA · SILUETA · PRODUCTO
   CV & PORTAFOLIO DE IXCHEL GUZMÁN SÁNCHEZ
   ========================================================================== */

/* 1. CONFIGURACIÓN DE VARIABLES & DISEÑO DE SISTEMA */
:root {
  /* Paleta de Colores Editorial */
  --bg-color: #FAF9F6;       /* Warm Alabaster / Marfil Cálido */
  --text-primary: #0A0A0A;   /* Coal / Negro Carbón */
  --text-muted: #4A4A4A;     /* Charcoal / Gris de Texto */
  --border-color: #D9DDDA;   /* Warm Grey / Gris de Líneas */
  --accent-color: #800020;   /* Deep Burgundy / Rojo Vino */
  --accent-light: rgba(128, 0, 32, 0.08);
  /* Amarillo de subrayado: tono cálido, no neón, para no pelear con el vino */
  --highlight: rgba(240, 214, 84, 0.55);
  --grid-line-color: rgba(217, 221, 218, 0.4);
  
  /* Fuentes */
  --font-display: 'Syne', sans-serif;
  --font-header: 'Space Grotesk', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Espaciados y Retículas */
  --header-height: 80px;
  --container-width: 1440px;
  /* Margen lateral único: header, contenido y footer se alinean con esta medida */
  --gutter: clamp(24px, 5.5vw, 96px);
  /* Aire vertical entre secciones */
  --section-space: clamp(64px, 7vw, 112px);
  --transition-speed: 0.35s;
  --ease-editorial: cubic-bezier(0.25, 1, 0.5, 1); /* Deceleración suave */
}

/* 2. RESET Y ESTILOS BASE */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
}

/* Enlaces globales */
a {
  color: inherit;
  text-decoration: none;
  transition: all var(--transition-speed) var(--ease-editorial);
}

/* Imágenes */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Botones y Controles */
button, .btn {
  font-family: var(--font-header);
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  transition: all var(--transition-speed) var(--ease-editorial);
}

/* 3. LÍNEAS DE RETÍCULA DE FONDO */
.grid-backdrop {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container-width);
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 0;
}

.grid-line {
  border-right: 1px solid var(--grid-line-color);
  height: 100%;
}
.grid-line:first-child {
  border-left: 1px solid var(--grid-line-color);
}

/* 4. CABECERA GLOBAL */
.main-header {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--header-height);
  background-color: rgba(250, 249, 246, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color);
  z-index: 100;
}

.header-container {
  max-width: var(--container-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 2fr 1.5fr 3fr 1fr;
  align-items: center;
  gap: 20px;
}

.brand {
  display: flex;
  flex-direction: column;
}

.brand-link {
  display: inline-block;
}

.brand-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 4px;
}

.header-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}

.availability {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot-active {
  width: 6px;
  height: 6px;
  background-color: var(--accent-color);
  border-radius: 50%;
  display: inline-block;
}

.meta-label {
  color: var(--text-muted);
}

.main-nav ul {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  gap: 30px;
}

.nav-link {
  font-family: var(--font-header);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 8px 0;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--text-primary);
  transition: width var(--transition-speed) var(--ease-editorial);
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: var(--text-primary);
  font-weight: 700;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
}

/* Botones Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.btn-secondary {
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background-color: var(--text-primary);
  color: var(--bg-color);
}

.btn-primary {
  background-color: var(--text-primary);
  color: var(--bg-color);
  border: 1px solid var(--text-primary);
}

.btn-primary:hover {
  background-color: transparent;
  color: var(--text-primary);
}

/* 5. VISTAS Y CONTENEDORES PRINCIPALES */
.main-content {
  flex-grow: 1;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Clases Helper de Estructura Editorial */
.editorial-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
}

.editorial-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

/* Contenedor sin aire vertical: para envolturas que solo llevan un divisor */
.container-flush {
  padding-top: 0;
  padding-bottom: 0;
}

.line-divider {
  grid-column: span 12;
  height: 1px;
  background-color: var(--border-color);
  margin: 40px 0;
}

/* Títulos Editoriales */
.section-title-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 12px;
  display: block;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
  margin-bottom: 50px;
}

.section-subtitle-serif {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
  color: var(--text-muted);
}

/* 6. VISTA INICIO (HOME) */
.hero-section {
  padding-top: 30px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--border-color);
}

/* Filas explícitas: sin esto el título choca con la columna de la foto
   y el auto-placement lo empuja debajo del pliegue. */
.hero-section .editorial-grid-12 {
  grid-template-rows: auto auto;
  align-items: start;
}

.hero-title-wrapper {
  grid-column: 1 / span 9;
  grid-row: 1;
  position: relative;
  /* Por encima de la foto: el nombre monta sobre el retrato a propósito */
  z-index: 3;
}

.hero-title {
  font-family: var(--font-display);
  /* Masthead apilado: el nombre completo cae a una palabra por línea */
  font-size: clamp(2.8rem, 7vw, 7rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.hero-subtitle {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-top: 25px;
  text-transform: uppercase;
  display: block;
  border-left: 2px solid var(--accent-color);
  padding-left: 15px;
}

.hero-image-container {
  grid-column: 8 / span 5;
  grid-row: 1 / span 2;
  position: relative;
  z-index: 1;
}

.hero-img-wrapper {
  /* Baja lo justo para que el nombre respire encima del retrato */
  margin-top: 90px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background-color: var(--border-color);
  position: relative;
  /* Proporción editorial 4:5: recorta el retrato vertical sin estirarlo */
  aspect-ratio: 4 / 5;
  /* Efecto inclinación ligera de la foto, como en las referencias */
  transform: rotate(-1.5deg);
  transition: transform 0.5s var(--ease-editorial);
}

.hero-img-wrapper:hover {
  transform: rotate(0deg) scale(1.02);
}

.hero-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Encuadre alto: conserva rostro y torso al recortar el cuerpo completo */
  object-position: center 18%;
  /* En reposo va a color; el blanco y negro es el estado de hover */
  filter: grayscale(0%);
  transition: filter 0.8s var(--ease-editorial), transform 0.8s var(--ease-editorial);
}

.hero-img-wrapper:hover img {
  filter: grayscale(100%);
}

.hero-summary-wrapper {
  grid-column: 1 / span 6;
  grid-row: 2;
  margin-top: 40px;
  position: relative;
  z-index: 2;
}

.hero-summary {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.5;
  font-weight: 300;
  color: var(--text-muted);
}

.hero-actions-container {
  margin-top: 30px;
  display: flex;
  gap: 20px;
}

/* Sección Resumen Profesional */
/* Es contenedor, no retícula: la retícula es el .editorial-grid-12 interno.
   Declararlo como grid metía el título y el bloque interno en 1 columna cada uno. */
.summary-block {
  /* El aire lo da el padding del contenedor; un margen extra abría un hueco muerto */
  margin-bottom: 0;
}

.summary-heading {
  grid-column: 1 / span 4;
}

.summary-text {
  grid-column: 5 / span 8;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.summary-text p {
  margin-bottom: 20px;
}

/* Sección de Capacidades (Grid) */
.skills-grid-section {
  /* El shorthand con 0 horizontal anulaba el gutter del contenedor */
  padding: var(--section-space) var(--gutter);
  border-bottom: 1px solid var(--border-color);
}

.skills-columns {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.skills-col {
  border-top: 1.5px solid var(--text-primary);
  padding-top: 25px;
}

.skills-col h3 {
  font-family: var(--font-header);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 25px;
}

.skills-col ul {
  list-style: none;
}

.skills-col li {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 15px;
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}

.skills-col li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-color);
}

/* Herramientas y Conocimientos (tarjetas con icono) */
.tools-section {
  padding: var(--section-space) var(--gutter);
  border-bottom: 1px solid var(--border-color);
}

.tools-cards {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.tool-card {
  border: 1px solid var(--border-color);
  background-color: #FFFFFF;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--transition-speed) var(--ease-editorial),
              transform var(--transition-speed) var(--ease-editorial);
}

.tool-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-3px);
}

.tool-card-icon {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--accent-color);
}

.tool-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tool-card-title {
  font-family: var(--font-header);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.tool-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tool-card-list li {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-muted);
  padding-left: 14px;
  position: relative;
}

.tool-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 1px;
  background-color: var(--accent-color);
}

/* Proyecto Destacado Home */
.featured-project-section {
  padding: var(--section-space) var(--gutter);
  border-bottom: 1px solid var(--border-color);
}

.featured-project-grid {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
  align-items: center;
}

.featured-info {
  grid-column: 1 / span 5;
}

.featured-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  padding: 4px 8px;
  display: inline-block;
  margin-bottom: 20px;
}

.featured-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 20px;
}

.featured-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.featured-media {
  grid-column: 6 / span 7;
}

.featured-img-wrap {
  border: 1px solid var(--border-color);
  overflow: hidden;
  background-color: var(--border-color);
  position: relative;
}

.featured-img-wrap img {
  width: 100%;
  /* Proporción natural del board, sin recorte */
  height: auto;
  max-height: 560px;
  object-fit: contain;
  display: block;
  transition: transform 0.6s var(--ease-editorial);
  filter: grayscale(80%);
}

.featured-img-wrap:hover img {
  transform: scale(1.02);
  filter: grayscale(0%);
}

/* 7. VISTA TRABAJO (PORTAFOLIO) */
.portfolio-filters {
  grid-column: span 12;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 45px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
}

.filter-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 12px;
  border: 1px solid transparent;
}

.filter-btn:hover {
  color: var(--text-primary);
}

.filter-btn.active {
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
  font-weight: 700;
  background-color: var(--text-primary);
  color: var(--bg-color);
}

/* Grid de Mosaico Editorial */
.portfolio-mosaic {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px;
}

.portfolio-item {
  grid-column: span 6; /* Default */
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
}

/* Diferentes anchos y alturas para simular retícula asimétrica de revista */
.portfolio-item.col-4 {
  grid-column: span 4;
}

.portfolio-item.col-8 {
  grid-column: span 8;
}

.portfolio-item.col-12 {
  grid-column: span 12;
}

.portfolio-item-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.portfolio-media-wrapper {
  overflow: hidden;
  border: 1px solid var(--border-color);
  /* Papel blanco: los boards traen fondo claro y el gris se leía como bloque vacío */
  background-color: #FFFFFF;
  position: relative;
  margin-bottom: 20px;
}

.portfolio-media-wrapper img {
  width: 100%;
  /* Proporción natural: los boards y fichas no se recortan.
     El tope de altura evita que una pieza muy vertical se vea gigante. */
  height: auto;
  max-height: 620px;
  object-fit: contain;
  display: block;
  filter: grayscale(90%);
  transition: filter 0.5s var(--ease-editorial), transform 0.5s var(--ease-editorial);
}

.portfolio-item:hover .portfolio-media-wrapper img {
  filter: grayscale(10%);
  transform: scale(1.02);
}

/* Ajustes de altura específicos para mosaico */
.portfolio-item.col-4 .portfolio-media-wrapper img {
  height: 280px;
}
.portfolio-item.col-8 .portfolio-media-wrapper img {
  height: 480px;
}
.portfolio-item.col-12 .portfolio-media-wrapper img {
  height: 550px;
}

.portfolio-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.portfolio-category {
  color: var(--accent-color);
  font-weight: 700;
}

.portfolio-item-title {
  font-family: var(--font-header);
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 8px;
}

.portfolio-item-subtitle {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 300;
  color: var(--text-muted);
}

/* 8. VISTA DETALLE DE PROYECTO */
.project-detail-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 40px;
  margin-bottom: 50px;
}

.project-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-bottom: 15px;
}

.project-meta-grid {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-top: 1px solid var(--text-primary);
  border-bottom: 1px solid var(--text-primary);
  padding: 25px 0;
  margin: 40px 0;
}

.project-meta-block h5 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.project-meta-block p {
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 500;
}

.project-description-block {
  grid-column: 1 / span 7;
}

.project-description-block h3 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 25px;
}

.project-description-block p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.project-process-block {
  grid-column: 8 / span 5;
  background-color: var(--accent-light);
  border: 1px solid var(--border-color);
  padding: 30px;
}

.project-process-block h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--accent-color);
  text-transform: uppercase;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.process-step {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 15px;
  padding-left: 25px;
  position: relative;
}

.process-step strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 2px;
}

.process-step::before {
  content: attr(data-step);
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-color);
}

/* Galería de Imágenes del Proyecto (Asimétrica) */
.project-gallery-title {
  grid-column: span 12;
  font-family: var(--font-display);
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 60px 0 30px 0;
  border-bottom: 1.5px solid var(--text-primary);
  padding-bottom: 10px;
}

.project-gallery-grid {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px;
}

/* Contenedor de Imagen de Galería */
.gallery-item {
  grid-column: span 6;
  border: 1px solid var(--border-color);
  overflow: hidden;
  background-color: var(--border-color);
  position: relative;
  cursor: pointer;
}

.gallery-item.full-width {
  grid-column: span 12;
}

.gallery-item img {
  width: 100%;
  height: auto;
  max-height: 700px;
  object-fit: contain;
  display: block;
  filter: grayscale(20%);
  transition: transform 0.6s var(--ease-editorial), filter 0.6s var(--ease-editorial);
}

.gallery-item:hover img {
  transform: scale(1.015);
  filter: grayscale(0%);
}

/* ==========================================================================
   EXCEPCIÓN DE COLOR
   El tratamiento editorial desatura las imágenes hasta el hover. En las
   láminas donde el color ES el contenido —cartas de color, chips Pantone—
   esa desaturación borra justo lo que hay que leer. Los proyectos marcados
   con colorCritical:true en data.js se muestran siempre a color pleno.
   ========================================================================== */
.portfolio-item.color-critical .portfolio-media-wrapper img,
.portfolio-item.color-critical:hover .portfolio-media-wrapper img,
.gallery-item.color-critical img,
.gallery-item.color-critical:hover img {
  filter: grayscale(0%);
}

.gallery-item-caption {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  padding: 10px;
  background-color: var(--bg-color);
  border-top: 1px solid var(--border-color);
}

/* 9. ANOTACIONES EDITORIALES / CORRECCIONES DE REVISTA */
.annotation-container {
  position: relative;
}

.editorial-annotation {
  position: absolute;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent-color);
  text-transform: uppercase;
  z-index: 5;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s var(--ease-editorial), transform 0.5s var(--ease-editorial);
}

/* Se activan cuando el contenedor está en hover o viewport */
.annotation-container:hover .editorial-annotation,
.annotation-container.active .editorial-annotation {
  opacity: 1;
  transform: scale(1);
}

/* Anotación Tipo Timbre / Sello */
.editorial-annotation.stamp {
  border: 1.5px solid var(--accent-color);
  padding: 6px 12px;
  border-radius: 4px;
  transform: rotate(-8deg) scale(0.9);
}

.annotation-container:hover .editorial-annotation.stamp,
.annotation-container.active .editorial-annotation.stamp {
  transform: rotate(-8deg) scale(1);
}

/* Anotación con Círculo (Hand-drawn) */
.editorial-annotation.note-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.editorial-annotation.note-circle::before {
  content: '';
  position: absolute;
  width: 130%;
  height: 130%;
  border: 1px dashed var(--accent-color);
  border-radius: 50%;
  animation: rotateCircle 20s linear infinite;
}

@keyframes rotateCircle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Anotación con Flecha Delgada (SVG) */
.editorial-annotation.note-arrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.editorial-annotation.note-arrow::before {
  content: '↙';
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 2px;
  color: var(--accent-color);
}

.editorial-annotation.badge {
  background-color: var(--accent-color);
  color: var(--bg-color);
  padding: 4px 8px;
  border-radius: 20px;
}

/* 10. VISTA PERFIL */
.profile-hero {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 60px;
}

.profile-intro {
  grid-column: 1 / span 7;
}

.profile-intro h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 30px;
}

.profile-intro p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.profile-visual {
  grid-column: 9 / span 4;
}

.profile-img-wrap {
  border: 1px solid var(--border-color);
  position: relative;
  background-color: var(--border-color);
}

.profile-img-wrap img {
  width: 100%;
  filter: grayscale(100%);
  object-fit: cover;
}

/* ==========================================================================
   CV MODULAR (referencia INSPO): retícula de 3 columnas con bloques tintados.
   Texto real y seleccionable, jerarquía H1/H2/H3 intacta para ATS.
   ========================================================================== */
.cv-sheet {
  display: grid;
  /* Lateral estrecha (retrato, perfil, contacto) + principal ancha */
  grid-template-columns: 0.72fr 1.28fr;
  gap: 44px;
  align-items: start;
}

.cv-col {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
}

/* Bloques de color: el equivalente al amarillo de la referencia,
   resuelto con la paleta del sitio (taupe y vino diluido). */
.cv-block {
  padding: 26px 24px;
}

.cv-block-tint   { background-color: #EFEAE3; }
.cv-block-accent { background-color: var(--accent-light); }

.cv-block-portrait {
  background-color: #EFEAE3;
  padding: 0;
  position: relative;
}

.cv-hello {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.03em;
  padding: 22px 24px 14px;
}

.cv-portrait {
  overflow: hidden;
}

.cv-portrait img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
  mix-blend-mode: multiply;
}

.cv-mod-identity {
  gap: 6px;
}

.cv-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.cv-role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-top: 8px;
}

.cv-mod-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-bottom: 8px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--text-primary);
}

.cv-text {
  font-size: 0.84rem;
  line-height: 1.55;
  color: #333333;
}

.cv-text + .cv-text {
  margin-top: 9px;
}

/* Entradas de trayectoria y formación */
.cv-job + .cv-job {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-color);
}

.cv-job-role {
  font-family: var(--font-header);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cv-job-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 10px;
}

.cv-job-company {
  font-size: 0.82rem;
  color: var(--accent-color);
}

.cv-job-date {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Listas de competencias y herramientas */
.cv-skill-group + .cv-skill-group {
  margin-top: 18px;
}

.cv-skill-group h4 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* El título del grupo puede partirse si la columna se angosta */
  flex-wrap: wrap;
}

.cv-skill-icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--accent-color);
}

.cv-skill-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cv-tick-list {
  list-style: none;
}

.cv-tick-list li {
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 7px;
  padding-left: 13px;
  position: relative;
  /* Sin esto, un término largo desborda la columna */
  overflow-wrap: break-word;
  word-break: break-word;
}

.cv-tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 1px;
  background-color: var(--accent-color);
}

/* Herramientas: cierra la columna principal tras la última experiencia */
.cv-tools-block {
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--border-color);
}

.cv-tools-row {
  display: grid;
  /* 2x2 dentro de la columna principal: a 4 columnas los ítems se parten */
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 26px;
}

.cv-tool-col {
  min-width: 0;
}

.cv-tool-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--accent-color);
  margin-bottom: 12px;
}

.cv-tool-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cv-tool-col h4 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

@media (max-width: 900px) {
  .cv-tools-row {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Visibilidad por medio: el teléfono solo existe en el PDF impreso */
.only-print {
  display: none !important;
}

/* Badges: información corta en chips (Complementaria, Idiomas) */
.cv-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cv-badges li {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  background-color: var(--accent-light);
  padding: 7px 11px;
  transition: border-color var(--transition-speed) var(--ease-editorial);
}

.cv-badges li:hover {
  border-color: var(--accent-color);
}

/* Badge de idioma: va pegado al puesto, sin encabezado */
.cv-badges-lang {
  margin-top: 14px;
}

/* Tags de modalidad: cierran el bloque de perfil */
.cv-badges-modes {
  margin-top: 18px;
}

/* Pares etiqueta / valor (contacto e idiomas) */
.cv-contact dt {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 12px;
}

.cv-contact dt:first-child {
  margin-top: 0;
}

.cv-contact dd {
  font-size: 0.82rem;
  line-height: 1.4;
  word-break: break-word;
}

.cv-contact dd a {
  border-bottom: 1px solid var(--border-color);
}

.cv-contact dd a:hover {
  border-bottom-color: var(--accent-color);
  color: var(--accent-color);
}

/* 11. VISTA CV (ATS-FRIENDLY & PRINT-READY) */
.cv-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px);
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.cv-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
}

.cv-intro {
  max-width: 46ch;
}

.cv-heading-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.cv-intro-line {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: var(--text-muted);
}

/* Estructura Interna del CV */
.cv-document {
  color: #1A1A1A;
  font-family: Arial, Helvetica, sans-serif; /* Fallback ultra-safe para ATS */
  line-height: 1.5;
}

/* Sobrescribimos fuentes para pantalla del CV respetando el diseño editorial */
.cv-document-wrapper {
  background-color: #FFFFFF;
}

.cv-name {
  font-family: var(--font-header);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #000000;
}

.cv-title {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-color);
  text-transform: uppercase;
  margin-bottom: 15px;
  letter-spacing: 0.02em;
}

.cv-meta-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 25px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #555555;
  border-bottom: 1.5px solid #000000;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

.cv-meta-info a {
  color: #555555;
  text-decoration: underline;
}

.cv-meta-info a:hover {
  color: #000000;
}

.cv-body-section {
  margin-bottom: 35px;
}

.cv-section-title {
  font-family: var(--font-header);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid #000000;
  padding-bottom: 5px;
  margin-bottom: 15px;
  color: #000000;
}

.cv-summary-text {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #333333;
}

/* Separación entre párrafos del perfil (resumen en dos bloques) */
.cv-summary-text + .cv-summary-text {
  margin-top: 10px;
}

/* Bloques de Experiencia CV */
.cv-experience-item {
  margin-bottom: 25px;
  break-inside: avoid;
}

.cv-experience-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.cv-job-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #000000;
}

.cv-job-title span {
  font-weight: 400;
  color: #555555;
}

.cv-job-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #555555;
}

.cv-pending-tag {
  background-color: var(--accent-light);
  color: var(--accent-color);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 2px 6px;
  border: 1px solid var(--accent-color);
  border-radius: 3px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
}

.cv-experience-desc {
  font-size: 0.85rem;
  font-style: italic;
  color: #666666;
  margin-bottom: 8px;
}

.cv-bullets {
  list-style-type: square;
  padding-left: 20px;
}

.cv-bullets li {
  font-size: 0.88rem;
  color: #222222;
  margin-bottom: 5px;
  line-height: 1.4;
}

/* Competencias y Formación CV */
.cv-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cv-skills-block h4 {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #000000;
}

.cv-skills-block p {
  font-size: 0.82rem;
  color: #333333;
  line-height: 1.4;
}

.cv-tools-list {
  font-size: 0.85rem;
  color: #333333;
}

.cv-education-item {
  margin-bottom: 15px;
}

.cv-edu-header {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.92rem;
  color: #000000;
}

.cv-edu-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #555555;
  font-weight: 400;
}

.cv-edu-desc {
  font-size: 0.82rem;
  color: #555555;
  margin-top: 4px;
}

/* 12. VISTA CONTACTO */
.contact-section-grid {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
}

.contact-info-block {
  grid-column: 1 / span 5;
}

.contact-intro-serif {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 40px;
}

.contact-details-list {
  list-style: none;
}

.contact-detail-item {
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}

.contact-detail-item h5 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.contact-detail-item p, .contact-detail-item a {
  font-family: var(--font-header);
  font-size: 1.3rem;
  font-weight: 500;
}

.contact-detail-item a:hover {
  color: var(--accent-color);
}

/* ---- Contacto: datos + modalidades, sin formulario ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 60px;
  align-items: start;
}

.contact-lead-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--accent-color);
  margin-top: 24px;
  max-width: 46ch;
}

.contact-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.btn-lg {
  padding: 16px 30px;
  font-size: 0.8rem;
}

.contact-block-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-bottom: 10px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--text-primary);
}

.contact-dl dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 20px;
}

.contact-dl dt:first-child {
  margin-top: 0;
}

.contact-dl dd {
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 4px;
  word-break: break-word;
}

.contact-dl dd a {
  border-bottom: 1px solid var(--border-color);
}

.contact-dl dd a:hover {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.modes-section {
  margin-top: var(--section-space);
}

.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.mode-card {
  border: 1px solid var(--border-color);
  background-color: #FFFFFF;
  padding: 30px 26px;
  transition: border-color var(--transition-speed) var(--ease-editorial),
              transform var(--transition-speed) var(--ease-editorial);
}

.mode-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-3px);
}

.mode-card h3 {
  font-family: var(--font-header);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.mode-card p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

.contact-form-block {
  grid-column: 6 / span 7;
  border: 1px solid var(--border-color);
  padding: 40px;
  background-color: #FFFFFF;
}

.contact-form-block h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  margin-bottom: 25px;
  letter-spacing: -0.01em;
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text-muted);
}

.form-control {
  width: 100%;
  padding: 12px 15px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  color: var(--text-primary);
  transition: border-color var(--transition-speed);
}

.form-control:focus {
  outline: none;
  border-color: var(--text-primary);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* Lightbox de Galería (Modal) */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.98);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-editorial);
}

.lightbox.active {
  opacity: 1;
  pointer-events: all;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-caption {
  font-family: var(--font-mono);
  color: #FFFFFF;
  font-size: 0.75rem;
  margin-top: 15px;
  letter-spacing: 0.05em;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: -45px;
  right: 0;
  color: #FFFFFF;
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-mono);
}

.lightbox-close:hover {
  color: var(--accent-color);
}

/* 13. PIE DE PÁGINA (FOOTER) */
.main-footer {
  border-top: 1px solid var(--border-color);
  padding: var(--section-space) var(--gutter);
  margin-top: auto;
  position: relative;
  z-index: 1;
  background-color: var(--bg-color);
}

.footer-container {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

.footer-tagline {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 10px;
}

/* EXPLORAR y CONTACTO en paralelo, no apilados */
.footer-links {
  grid-column: 2 / span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.footer-links h4 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 15px;
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.footer-links a {
  color: var(--text-muted);
}

.footer-links a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  grid-column: span 3;
  border-top: 1px solid var(--border-color);
  padding-top: 25px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Loader */
.loader-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   14. RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */

/* Tablet (menor a 1024px) */
@media (max-width: 1024px) {
  .header-container {
    grid-template-columns: 2fr 3fr 1fr;
    padding: 0 20px;
  }
  .header-meta {
    display: none; /* Ocultar meta info del header en tablet/móvil */
  }
  .editorial-container {
    /* El gutter ya baja a 24px por clamp; aquí solo se reduce el aire vertical */
    padding: 60px var(--gutter);
  }
  .skills-columns {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .featured-project-grid {
    grid-template-columns: 1fr;
  }
  /* Con una sola columna, "span 12" creaba 12 tracks implícitos y desbordaba.
     min-width:0 evita además que imagen y texto revienten la columna. */
  .featured-info,
  .featured-media,
  .featured-img-wrap {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .featured-img-wrap img {
    max-height: 380px;
  }
  .portfolio-item {
    grid-column: span 6 !important; /* Forzar 2 columnas en tablet */
  }
  .portfolio-media-wrapper img {
    max-height: 340px;
  }
  .project-meta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .project-description-block, .project-process-block {
    grid-column: span 12;
  }
  .project-gallery-grid {
    gap: 20px;
  }
  .gallery-item {
    grid-column: span 6 !important;
  }
  .profile-intro {
    grid-column: span 12;
  }
  .profile-visual {
    grid-column: span 6;
    margin-top: 40px;
  }
  .contact-section-grid {
    grid-template-columns: 1fr;
  }
  .contact-info-block, .contact-form-block {
    grid-column: span 12;
  }
  .footer-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer-bottom {
    grid-column: span 1;
    flex-direction: column;
    gap: 10px;
  }
}

/* Móvil (menor a 768px) */
@media (max-width: 768px) {
  :root {
    --header-height: 70px;
  }
  .header-container {
    grid-template-columns: 1fr auto;
  }
  .main-nav {
    display: none; /* Se reactiva abajo como fila propia */
  }
  /* Agregamos menú de navegación simple en móviles */
  .main-header {
    height: auto;
    padding: 15px 0;
  }
  .header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .main-nav {
    display: block;
    width: 100%;
  }
  .main-nav ul {
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }
  .nav-link {
    font-size: 0.7rem;
  }
  .hero-section {
    padding-top: 30px;
  }
  .hero-title-wrapper {
    grid-column: span 12;
  }
  .hero-image-container {
    grid-column: span 12;
    grid-row: auto;
    margin-top: 30px;
  }
  .hero-img-wrapper {
    transform: none;
  }
  .hero-summary-wrapper {
    grid-column: span 12;
  }
  .summary-heading {
    grid-column: span 12;
  }
  .summary-text {
    grid-column: span 12;
  }
  .portfolio-item {
    grid-column: span 12 !important; /* 1 columna en móvil */
  }
  .portfolio-media-wrapper img {
    max-height: 300px;
  }
  .gallery-item {
    grid-column: span 12 !important;
  }
  .profile-visual {
    grid-column: span 12;
  }
  .cv-section {
    padding: 30px 15px;
    border: none;
  }
  .cv-meta-info {
    flex-direction: column;
    gap: 10px;
  }
  .cv-skills-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cv-experience-header {
    flex-direction: column;
    gap: 4px;
  }
  .cv-edu-header {
    flex-direction: column;
    gap: 4px;
  }
}

/* ==========================================================================
   15. ESTILOS DE IMPRESIÓN (PRINT STYLESHEET)
   ========================================================================== */

/* ==========================================================================
   MÓVIL: correcciones de desbordamiento y jerarquía
   A 390px el documento medía 604px de ancho; aquí se cierra ese desbordamiento.
   ========================================================================== */
@media (max-width: 768px) {
  /* El header crece con su contenido y CONTACTAR vuelve a ser visible:
     es el único acceso a la vista de Contacto. */
  .header-actions {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .btn-header-cv {
    width: 100%;
    max-width: 320px;
  }

  /* Título del hero: el mínimo anterior (2.8rem) cortaba "SÁNCHEZ" */
  .hero-title {
    font-size: clamp(1.7rem, 8.6vw, 3.2rem);
    letter-spacing: -0.03em;
    /* En móvil el nombre cae en 4 líneas y con line-height 0.88 el acento
       de "GUZMÁN"/"SÁNCHEZ" chocaba con la línea de arriba. */
    line-height: 0.95;
  }

  .hero-subtitle {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  /* Syne Extrabold lleva los acentos de las mayúsculas (Á, Ó, É) por encima
     de la altura de caja: con line-height <= 1 se encimaban con la línea
     anterior en cuanto el título se partía en dos. */
  .brand-name {
    line-height: 1.15;
  }

  .featured-title {
    line-height: 1.1;
  }

  .portfolio-item-title {
    line-height: 1.2;
  }

  .section-title {
    /* Syne Extrabold es muy ancha: "CONOCIMIENTOS" no cabía a 33px.
       5.7vw es el tope al que esa palabra entra completa desde 320px.
       Sin hyphens: partía "HERRAMIEN-TAS" y "CONOCIMIEN-TOS". */
    font-size: clamp(1.05rem, 5.7vw, 2.5rem);
    line-height: 1;
    margin-bottom: 32px;
    overflow-wrap: break-word;
    hyphens: none;
  }

  /* Al detalle de proyecto nunca se le bajó el mínimo (2.5rem = 40px):
     "ESPECIFICACIONES" medía 264px de más y hacía scroll horizontal.
     5.1vw es el tope al que entra el título de proyecto más largo. */
  .project-title {
    font-size: clamp(1rem, 5.1vw, 2.5rem);
    line-height: 1;
    overflow-wrap: break-word;
  }

  .section-subtitle-serif {
    font-size: clamp(1.25rem, 6vw, 1.8rem);
  }

  /* Las anotaciones editoriales usan offsets negativos en línea y se salen
     de la pantalla; en móvil el recurso no aporta y estorba. */
  .editorial-annotation {
    display: none !important;
  }

  /* Retícula decorativa de fondo: en pantallas chicas solo agrega ruido */
  .grid-backdrop {
    display: none;
  }

  /* Los 11 gutters de la retícula de 12 columnas (30-40px) suman más que el
     ancho útil de un teléfono chico: a 320px los tracks colapsaban a 0px y el
     hijo con "span 12" quedaba en 330px, más ancho que la pantalla. En móvil
     todo va a una sola columna, así que el gutter horizontal no se ve. */
  .editorial-grid-12,
  .portfolio-mosaic,
  .project-gallery-grid,
  .featured-project-grid {
    column-gap: 0;
  }

  /* Cualquier hijo de retícula puede reventar la columna por min-width:auto */
  .editorial-grid-12 > *,
  .featured-project-grid > *,
  .portfolio-mosaic > *,
  .project-gallery-grid > *,
  .cv-sheet > *,
  .contact-layout > * {
    min-width: 0;
  }

  /* Footer: dejaba de caber por la retícula de 3 columnas */
  .footer-container {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .footer-links {
    grid-column: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .footer-bottom {
    grid-column: auto;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .footer-title {
    font-size: 0.95rem;
  }

  /* CV: una sola columna en móvil */
  .cv-sheet {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .cv-tools-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cv-full {
    padding-top: 24px;
  }

  .cv-header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .cv-header-actions .btn {
    width: 100%;
  }

  .cv-portrait img {
    max-height: 420px;
    object-fit: cover;
    object-position: center 20%;
  }

  /* Contacto */
  .contact-cta-row .btn {
    width: 100%;
  }

  .modes-grid,
  .tools-cards {
    grid-template-columns: 1fr;
  }

  /* Detalle de proyecto: la fecha ya no compite con el puesto */
  .cv-job-line {
    flex-direction: column;
    gap: 2px;
  }

  .project-meta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .hero-title {
    font-size: clamp(1.55rem, 8.2vw, 2.4rem);
  }
  /* La columna del CV baja a ~194px a 320px y "Competencias" se salía del
     bloque. El tope de 1.35rem se recupera solo a partir de ~424px. */
  .cv-mod-title {
    font-size: clamp(1rem, 5.1vw, 1.35rem);
    overflow-wrap: break-word;
  }
  .footer-links {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   MICRO-ANIMACIONES
   Entrada progresiva al entrar en viewport + microinteracciones de hover.
   Todo se desactiva con prefers-reduced-motion (BRD §8 y §17).
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-editorial),
              transform 0.7s var(--ease-editorial);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Escalonado: cada hermano entra un poco después que el anterior */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-editorial),
              transform 0.6s var(--ease-editorial);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.13s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.21s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.29s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.37s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.45s; }

/* Entrada en capas del hero: foto, nombre, título, resumen */
.hero-title-wrapper,
.hero-image-container,
.hero-summary-wrapper {
  animation: heroRise 0.9s var(--ease-editorial) both;
}

.hero-image-container { animation-delay: 0.08s; }
.hero-summary-wrapper { animation-delay: 0.18s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* El subrayado del título de sección se dibuja al entrar */
.cv-mod-title,
.contact-block-title {
  background-image: linear-gradient(var(--text-primary), var(--text-primary));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 2px;
  border-bottom-color: transparent;
  transition: background-size 0.8s var(--ease-editorial);
}

.reveal.is-visible.cv-mod-title,
.reveal.is-visible.contact-block-title,
.is-visible .cv-mod-title,
.is-visible .contact-block-title {
  background-size: 100% 2px;
}

/* Subrayado tipo marcador: solo para frases clave, no para bloques enteros.
   El degradado arranca al 52% de la altura para que se lea como plumón. */
.mark {
  background-image: linear-gradient(180deg, transparent 52%, var(--highlight) 52%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.12em;
  /* Se traza al entrar en viewport, junto con el reveal del bloque */
  transition: background-size 0.75s var(--ease-editorial) 0.2s;
}

.reveal:not(.is-visible) .mark,
.reveal-stagger:not(.is-visible) .mark {
  background-size: 0% 100%;
}

/* Variante para tipografía de gran escala: a 7vw una banda al 52% tapa media
   letra, así que el trazo sube y se adelgaza para leerse como plumón. */
.mark-display {
  /* Banda acotada arriba y abajo: con line-height 0.88 un degradado abierto
     se derrama sobre la línea siguiente. Cubre el tercio bajo de las mayúsculas
     y cierra en la línea base. */
  background-image: linear-gradient(180deg,
    transparent 57%,
    var(--highlight) 57%,
    var(--highlight) 83%,
    transparent 83%);
  padding: 0 0.06em;
  /* Se traza sola después de que el nombre entra en escena */
  animation: markDraw 0.85s var(--ease-editorial) 0.55s both;
}

@keyframes markDraw {
  from { background-size: 0% 100%; }
  to   { background-size: 100% 100%; }
}

/* Microinteracción de listas: el guion del bullet se estira en hover */
.tool-card-list li::before,
.cv-tick-list li::before {
  transition: width 0.3s var(--ease-editorial);
}

.tool-card-list li:hover::before,
.cv-tick-list li:hover::before {
  width: 12px;
}

/* Botones: elevación mínima, sin exagerar */
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* Filtros del portafolio */
.filter-btn {
  transition: color var(--transition-speed) var(--ease-editorial),
              background-color var(--transition-speed) var(--ease-editorial),
              transform var(--transition-speed) var(--ease-editorial);
}

.filter-btn:hover {
  transform: translateY(-2px);
}

/* Tarjetas del mosaico: la imagen respira en hover */
.portfolio-media-wrapper img {
  transition: filter 0.5s var(--ease-editorial), transform 0.6s var(--ease-editorial);
}

.portfolio-item-link:hover .portfolio-media-wrapper img {
  transform: scale(1.02);
  filter: grayscale(0%);
}

/* Respeto total a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
  }

  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .cv-mod-title,
  .contact-block-title {
    background-size: 100% 2px;
  }

  .btn-primary:hover,
  .btn-secondary:hover,
  .filter-btn:hover,
  .tool-card:hover,
  .mode-card:hover {
    transform: none;
  }
}

@media print {
  /* Forzar tamaño de página A4 con márgenes */
  @page {
    size: A4;
    margin: 12mm 15mm;
  }

  /* --- CV en impresión: conserva el diseño de la hoja (2 columnas, bloques
         tintados y retrato). Medido: 991x3003px -> A4 útil 680x1032 = 2 páginas.
         print-color-adjust fuerza los fondos sin depender de que el usuario
         active "Gráficos de fondo" en el diálogo de impresión. --- */
  .cv-sheet,
  .cv-mod,
  .cv-block,
  .cv-block-tint,
  .cv-block-accent,
  .cv-block-portrait,
  .cv-badges li,
  .cv-pending-tag {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .cv-sheet {
    display: grid !important;
    grid-template-columns: 0.72fr 1.28fr !important;
    gap: 8mm !important;
    align-items: start !important;
  }

  .cv-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 6mm !important;
  }

  /* Ningún módulo se parte a media página */
  .cv-mod,
  .cv-job,
  .cv-skill-group,
  .cv-tool-col {
    break-inside: avoid;
  }

  .cv-block {
    padding: 4mm !important;
  }

  .cv-block-portrait {
    padding: 0 !important;
  }

  .cv-hello {
    font-size: 15pt !important;
    padding: 4mm 4mm 2mm !important;
  }

  .cv-portrait img {
    max-height: 60mm !important;
    object-fit: cover !important;
    object-position: center 18% !important;
  }

  /* Tipografía calibrada para 0.69 de escala: no depende del zoom del navegador */
  .cv-name {
    font-size: 15pt !important;
    line-height: 1.05 !important;
  }

  .cv-role {
    font-size: 7.5pt !important;
    letter-spacing: 0.04em !important;
  }

  .cv-mod-title {
    font-size: 11pt !important;
    border-bottom: 1.5pt solid #000000 !important;
    background-size: 100% 1.5pt !important;
    padding-bottom: 2pt !important;
    margin-bottom: 4pt !important;
  }

  .cv-text,
  .cv-tick-list li,
  .cv-contact dd,
  .cv-bullets li {
    font-size: 8pt !important;
    line-height: 1.35 !important;
    color: #1A1A1A !important;
  }

  .cv-job-role { font-size: 8.5pt !important; }
  .cv-job-company { font-size: 8pt !important; }
  .cv-job-date { font-size: 7pt !important; }

  .cv-contact dt,
  .cv-skill-group h4,
  .cv-tool-col h4 {
    font-size: 6.5pt !important;
    margin-top: 5pt !important;
  }

  .cv-job + .cv-job {
    margin-top: 5pt !important;
    padding-top: 5pt !important;
  }

  .cv-tick-list li,
  .cv-bullets li {
    margin-bottom: 2.5pt !important;
  }

  /* Herramientas: 2x2 dentro de la columna principal */
  .cv-tools-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4mm !important;
  }

  .cv-tools-block {
    padding-top: 4mm !important;
  }

  /* Los iconos son SVG: imprimen nítidos */
  .cv-skill-icon { width: 9pt !important; height: 9pt !important; }
  .cv-tool-icon  { width: 12pt !important; height: 12pt !important; margin-bottom: 3pt !important; }

  /* Badges: se conservan como chips, es parte del diseño */
  .cv-badges li {
    font-size: 6.5pt !important;
    padding: 3pt 5pt !important;
  }

  .cv-contact dd a {
    border-bottom: none !important;
  }

  /* El teléfono aparece solo aquí; el enlace de WhatsApp no sirve en papel */
  .only-print {
    display: block !important;
  }

  .only-screen {
    display: none !important;
  }

  /* El subrayado amarillo se conserva: es parte del diseño de la hoja */
  .mark {
    background-size: 100% 100% !important;
  }

  /* Nada de animación en papel */
  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Resetear colores para impresión limpia */
  html, body {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10pt !important;
    line-height: 1.4 !important;
    width: 100%;
    height: auto;
  }

  /* Ocultar elementos interactivos y decorativos de pantalla */
  .main-header,
  .main-footer,
  .grid-backdrop,
  .cv-header-actions,
  .btn,
  .nav-link,
  .editorial-annotation,
  .lightbox {
    display: none !important;
  }

  /* Asegurar que la vista activa se imprima en formato completo */
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Re-estructurar el contenedor del CV para impresión lineal */
  .cv-section {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: transparent !important;
  }

  .cv-document-wrapper {
    background-color: transparent !important;
  }

  .cv-name {
    font-size: 20pt !important;
    font-weight: bold !important;
    color: #000000 !important;
    margin-bottom: 2pt !important;
    text-transform: uppercase !important;
  }

  .cv-title {
    font-size: 11pt !important;
    font-weight: bold !important;
    color: #000000 !important;
    margin-bottom: 8pt !important;
    text-transform: uppercase !important;
  }

  .cv-meta-info {
    font-size: 8pt !important;
    color: #333333 !important;
    border-bottom: 1.5pt solid #000000 !important;
    padding-bottom: 8pt !important;
    margin-bottom: 15pt !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 15pt !important;
  }

  .cv-meta-info a {
    color: #000000 !important;
    text-decoration: none !important;
  }

  .cv-body-section {
    margin-bottom: 15pt !important;
  }

  .cv-section-title {
    font-size: 10pt !important;
    font-weight: bold !important;
    border-bottom: 1pt solid #000000 !important;
    padding-bottom: 3pt !important;
    margin-bottom: 8pt !important;
    text-transform: uppercase !important;
    color: #000000 !important;
  }

  .cv-summary-text {
    font-size: 8.5pt !important;
    line-height: 1.4 !important;
    color: #222222 !important;
  }

  .cv-summary-text + .cv-summary-text {
    margin-top: 6pt !important;
  }

  /* Experiencia Laboral en Impresión */
  .cv-experience-item {
    margin-bottom: 12pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important; /* Prevenir saltos de página a la mitad de una experiencia */
  }

  .cv-experience-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    font-weight: bold !important;
    font-size: 9pt !important;
    margin-bottom: 3pt !important;
  }

  .cv-job-title {
    font-size: 9pt !important;
    color: #000000 !important;
  }

  .cv-job-title span {
    font-weight: normal !important;
    color: #333333 !important;
  }

  .cv-job-date {
    font-size: 8pt !important;
    color: #333333 !important;
    font-family: inherit !important;
  }

  .cv-pending-tag {
    display: none !important; /* Ocultar el tag de validación en la versión impresa final */
  }

  .cv-experience-desc {
    font-size: 8pt !important;
    color: #444444 !important;
    margin-bottom: 4pt !important;
  }

  .cv-bullets {
    padding-left: 15pt !important;
  }

  .cv-bullets li {
    font-size: 8pt !important;
    color: #111111 !important;
    margin-bottom: 2pt !important;
    line-height: 1.35 !important;
  }

  /* Competencias y Educación en Impresión (Una sola columna principal con bloque lateral compacto) */
  .cv-skills-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15pt !important;
  }

  .cv-skills-block h4 {
    font-size: 8.5pt !important;
    margin-bottom: 4pt !important;
  }

  .cv-skills-block p {
    font-size: 7.5pt !important;
    line-height: 1.3 !important;
  }

  .cv-tools-list {
    font-size: 7.5pt !important;
  }

  .cv-education-item {
    margin-bottom: 8pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .cv-edu-header {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 9pt !important;
  }

  .cv-edu-date {
    font-size: 8pt !important;
    font-family: inherit !important;
  }

  .cv-edu-desc {
    font-size: 7.5pt !important;
    color: #333333 !important;
  }
}