html {
  font-size: 62.5%; /* 1rem = 10px */
}
* {
  box-sizing: border-box;
}
body {
  font-size: 2rem;
  line-height: 1.5;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.1rem;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin-block: 0;
  margin-inline: 1rem;
}

h1, h2, h3, h4, h5 {
  font-family: Georgia, serif;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  
}
h1 { font-size: 4rem; color: #cc0000; }
h2 { font-size: 4rem; font-weight: 400; margin-block-start: 8rem; }
h3 { font-size: 2rem; font-weight: 400; color: #cc0000;}
h4 { font-size: 2.5rem; margin-block: 8rem 4rem; }
a {
  color: #3030ff;
  text-decoration: none;
}
a:hover {
  color: #B60000;
}
a:visited {
  color: #990099;
}
ul {
  font-size: 1.75rem;
}
.center {
  /*background-image: url(../i/bg-grid.png);*/
  background-position: left top;
  max-width: 60ch; 
  margin: 0 auto;
}
header {
  margin-block-end: 8rem;
}
button {
  padding: 0;
  border: none;
  background: none;
}
/* CSS Formulas */

/* Cover formula */
.cover {
    /* Establish a columnar flex context */
    display: flex;
    flex-direction: column;
    /* Set a minimum height to match the viewport height */
    min-block-size: 90vh;
    /* Set a padding value */
    padding: 0;
}
.cover > * {
    /* Give each child a top and bottom margin */
    margin-block: 1rem;
}
.cover > :first-child:not(.stack) {
    /* Remove the top margin from the first child if it doesn't match the centered element */
    margin-block-start: 0;
}
.cover > :last-child:not(.stack) {
    /* Remove the bottom margin from the last child if it doesn't match the centered element */
    margin-block-end: 0;
}
.cover > .stack {
    /* Center the centered element (h1 here) in the available vertical space */
    margin-block: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Sidebar Formula */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.with-sidebar > :first-child {
  /* sidebar: ancho fijo, pero puede crecer si hay espacio */
  flex-basis: 30rem;  /* al gusto */
  flex-grow: 1;
  /*justify-items: center;
  align-items: center;  Comentamos para alinear la lista a top left */
}
.with-sidebar > :last-child {
  /* content principal: crece mucho más */
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

/* Stack Formula */
.stack { 
  /* ↓ The flex context */ 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start;
} 
.stack > * { 
  /* ↓ Any extant vertical margins are removed */ 
  margin-block: 0; 
}  
.stack > * + * { 
  /* ↓ Top margin is only applied to successive elements */ 
  margin-block-start: var(--space, 1.5rem); 
}

/* The Grid Formula */
.grid {
  display: grid;
  grid-gap: 3rem;
  --minimum: 18ch;
}
@supports (width: min(var(--minimum), 100%)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--minimum), 100%), 1fr));
  }
}

/* Custom Styles*/

/* Skills chart*/
.chart-wrap {
  width:100%;
  height: 30rem;
  max-width:100%;
  background: #fff;
  box-sizing:border-box;
}
canvas{
  display:block;
  width:100%;
  height:30rem;
}

/* Case Study */
.list-files-case-study {
  list-style: none;
  padding: 0 2rem 0 0;
}
.list-files-case-study li {
  padding-left: 3rem;
  position: relative;
  margin-bottom: 2rem;
  border-bottom: #333 1px solid;
}
.list-files-case-study li:hover {
  background-color: #eee;
}
/* Bullet for Miro */
.list-files-case-study .miro::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 2rem;
  height: 2rem;
  background-image: url('../i/icon-miro.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
/* Bullet for Figma */
.list-files-case-study .figma::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 2rem;
  height: 2rem;
  background-image: url('../i/icon-figma.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
/* Bullet for Report */
.list-files-case-study .report::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 2rem;
  height: 2rem;
  background-image: url('../i/icon-pdf.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
/* List Code Canvas */
.list-code-canvas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-block-start: 0;
  margin-block-end: 6rem;
  padding-inline: 0;
  gap: 3rem;
}
.list-code-canvas li {
  border: solid 0.1rem #ccc;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
}
.list-code-canvas li:hover {
  background-color: #f5f5f5;
  border: solid 0.1rem #f5f5f5; 
}

/* The Graphics grid *
/* Card */
.grid > .card {
  background-color: white;
  border-radius: 1rem;
  padding: 1rem 0;
  transition: transform 1.2s ease;
}
.grid > .card:hover {
  transform: translateY(-4px);
}
/* Image Container */
.responsive-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2; /* Mantener proporción fija */
  overflow: hidden;
  margin-bottom: 1rem;
  cursor: pointer;
}
/* Placeholder (SVG) */
.responsive-image img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  transition: opacity 0.4s ease;
}
/* Imagen real (fondo) */
.card .responsive-image::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.4s ease;
  border-radius: 1rem;
}
.pixel-art .responsive-image::before { /* bordes nítidos y bloques de color al escalar para pixel art */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.card:hover .responsive-image img {
  opacity: 0;
}
.card:hover .responsive-image::before {
  opacity: 1;
}
.card h3 {
  margin-block: 0;
  padding: 1rem 1rem 0;
  text-transform: uppercase;
  font-weight: 400;
  color: #cc0000;
}
.card p {
  padding: 0 1rem 1rem;
  margin-block: 0;
  line-height: 1.5;
  border-bottom: 0.1rem dashed #ccc;
}

/* Popup */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(30, 30, 30, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}
.popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.popup-image {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  border-radius: 6px;
  transition: transform 0.3s ease;
}
.close-btn {
  position: absolute;
  top: 2rem;
  right: 3rem;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  font-weight: bold;
}

/* Footer lists */
footer {
  color: white;
  text-transform: uppercase;
  text-align: center;
  background-color: #333;
  border-radius: 0.5rem;
  border-top: solid 0.5rem #999;
  border-bottom: solid 0.5rem #999;
  padding: 0 4rem 7rem;
  margin-block-start: 8rem;
}
footer h2, footer h3 {
  color: white;
  font-weight: 400;
}
footer h2 { font-size: 2rem; margin-block-start: 8rem; margin-block-end: 3rem;}
footer h3 { font-size: 1.5rem; margin-block-start: 4rem; margin-block-end: 3rem;}
footer > div {
  display: flex;
  justify-content: center;
}
footer > div > ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: 0;
  margin-block-end: 2rem;
  padding-inline: 0;
  gap: 2rem;
  font-size: 1.5rem;
}
footer > div > ul > li {
  background-color: #333;
  padding: 1rem;
  border-radius: 0.5rem;
  border: solid 0.05rem #ddd;
  display: flex;
  align-items: center;
  line-height: 1rem;
  color: white;
}
footer > div > ul > li:hover {
  background-color: #555;
}
footer > div > ul > li a {
  color: white;
  display: flex;
  align-items: center;
}
footer > div > ul > li a:hover {
  color: #fff;
}
footer > div > ul > li > a:visited {
  color: #ccc;
}
footer > div > ul >  li > a > svg {
  height: 1em; 
  /* ↓ Override the em value with `1cap` 
  where `cap` is supported */ 
  height: 2cap; 
  width: 1em; 
  width: 2cap;
  margin-inline: 0.5rem;
  vertical-align:baseline;
}
footer > div > ul >  li.contact-me {
  background-color: #004400;
}
footer > div > ul >  li:hover.contact-me {
  background-color: #006400;
}

/* Testing snips */

footer { /* textured pattern */
  background: repeating-linear-gradient(
    35deg,
    hsl(0, 0%, 20%) 0px 2px,
    hsl(0, 0%, 25%) 0px 4px
  );
  mix-blend-mode: multiply;
}

.visually-hidden { /* Only for text recognition */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.grok-quote {
  max-width: 50rem;
  margin: 4rem auto 2rem;
  padding: 2rem;
  font-size: 1.5rem;
  font-style: italic;
  text-align: center;
  border-left: none;
  quotes: "“" "”";
}
.grok-quote cite { font-weight: bold; }

::selection { /* Todos los navegadores */
  background-color: #FFDEAD;
  color: #000;
}
::-moz-selection { /* Firefox */
  background: #FFDEAD;
  color: #000;
}
::-webkit-selection { /* Safari/Chrome antiguos */
  background: #FFDEAD;
  color: #000;
}