/* ================================
   SYSTEM CSS — Home + Cases
   Refined for Readability & Contrast
   ================================ */

:root{
  /* Core Colors - Adjusted for better contrast */
  --bg:#F9F9F7;
  --text:#111111;
  --muted:#525252; /* Was #6b7280 - Darkened for better readability on small text */
  --line:#d1d5db;
  --lineSoft:#e5e7eb;
  --accent:#f97316;

  /* Layout */
  --container-max:1536px;
  --pad-mobile:24px;
  --pad-desktop:48px;

  /* Rhythm */
  --space-xs:8px;
  --space-sm:14px;
  --space-md:28px;
  --space-lg:56px;
  --space-xl:96px;

  /* Chips */
  --chip-bg: rgba(255,255,255,0.65); /* More opaque for legibility */
  --chip-border: rgba(17,17,17,0.15);
  --chip-text: #000000;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:rgba(249,115,22,.25);color:#7c2d12;}
a{color:inherit;text-decoration:none;}

/* Container */
.container{
  width:min(100% - (var(--pad-mobile) * 2), var(--container-max));
  margin-inline:auto;
}
@media (min-width:768px){
  .container{
    width:min(100% - (var(--pad-desktop) * 2), var(--container-max));
  }
}

/* Type utilities */
.font-mono{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
.tight-heading{letter-spacing:-0.03em;line-height:0.95;}
.mono-label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.06em; /* Slightly tighter for better grouping */
  text-transform:uppercase;
  color:#666; /* Darkened from #888 */
  font-weight: 500;
}
.muted{color:var(--muted);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  padding:12px 14px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .2s ease,color .2s ease,transform .2s ease, background .2s ease;
  background:transparent;
}
.btn:hover{
  border-color:#111;
  color:#111;
  transform:translateY(-1px);
  background:rgba(255,255,255,.25);
}

/* Chips / Tags (READABILITY UPGRADE) */
.chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:16px;
}

.chip{
  display:inline-flex;align-items:center;
  padding:6px 12px; /* A bit more horizontal padding */
  border:1px solid var(--chip-border);
  background:var(--chip-bg);
  color:var(--chip-text);
  border-radius:99px;
  font-size:12px; /* Bumped from 11px for readability */
  font-weight: 500; /* Added weight */
  line-height:1;
  white-space:nowrap;
  backdrop-filter: blur(4px); /* Nice touch if over images */
}

/* ================================
   NAV
   ================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  background:rgba(249,249,247,.85); /* Slightly more opaque */
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--lineSoft);
}
@media (min-width:768px){.nav{padding:18px 48px;}}
.nav__brand{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.nav__brandMark{color:var(--accent);}
.nav__links{display:flex;gap:24px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#555;}
.nav__link:hover{color:#111;}

/* ================================
   HOME — HERO
   ================================ */

.hero{
  padding-top:calc(112px + 6vh);
  padding-bottom:calc(var(--space-lg) + 6vh);
  border-bottom:1px solid var(--line);
  min-height:85vh;
}

@media (min-width:768px){
  .hero{
    padding-top:calc(128px + 6vh);
  }
}

.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:64px;
  align-items:flex-end;
}

@media (min-width:768px){
  .hero__grid{
    grid-template-columns:4fr 8fr;
    gap:64px;
  }
}

.hero__lead{
  margin:0;
  font-size:18px;
  line-height:1.5;
  font-weight:500;
  max-width:50ch;
  color: #222; /* High contrast for lead text */
}

@media (min-width:768px){
  .hero__lead{
    font-size:20px;
  }
}

.hero__accent{
  width:40px;
  height:3px; /* Slightly thicker */
  background:var(--accent);
  margin:24px 0;
}

.hero__support{
  margin:0;
  margin-top:14px;
  font-size:16px; /* Bumped from 15px */
  line-height:1.6;
  color:#4b5563; /* Darker gray */
  max-width:60ch;
}

@media (min-width:768px){
  .hero__support{
    font-size:17px;
  }
}

.hero__cta{
  margin-top:32px;
}

.hero__right{
  display:flex;
  justify-content:flex-end;
}

/* === HERO TITLE === */
.hero__title{
  margin:0;
  text-transform:uppercase;
  text-align:right;
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:0.92; /* Tighter line height for cohesion */
  font-size:64px;
  max-width: 10.5ch;
}

.hero__line--primary{
  color: var(--text);
}

.hero__line--secondary{
  color: #777; /* Increased contrast from #5a5a58 */
  letter-spacing: -0.03em;
}

@media (min-width:768px){
  .hero__title{
    font-size:104px;
    max-width: 11ch;
  }
}

@media (min-width:1024px){
  .hero__title{
    font-size:128px;
    max-width: 11.5ch;
  }
}

@media (max-width:767px){
  .hero__grid{
    gap:32px;
  }
  .hero__title{
    text-align:left;
    font-size:48px; /* Slightly larger on mobile */
    line-height:1;
    max-width: 14ch;
  }
}

.hero__line{display:block;}
.hero__nowrap{white-space:nowrap;}
.hero__is{color: var(--accent);}


/* =====================================
   WORK — 33 / 66 EDITORIAL SYSTEM
===================================== */

.work{
  padding: 140px 0;
}

.workStack{
  display: grid;
  gap: 48px; /* More breathing room between cards */
}

/* CARD */
.workCase{
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--lineSoft);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg), #f6f6f8 45%);
  transition: border-color .2s ease, transform .25s ease, box-shadow .2s ease;
}

.workCase:hover{
  border-color: rgba(17,17,17,.4);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

/* LAYOUT */
.workCase__layout{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  padding: 32px;
}

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

/* LEFT */
.workCase__info{
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: center;
}

.workCase__top{
  color: #666; /* Darker than #9ca3af */
  display: flex;
  gap: 12px;
  font-weight: 500;
}

.workCase__impact{
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--accent);
  transition: color .2s ease;
}

.workCase__title{
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.workCase__meta{
  color: #555;
  font-size: 15px;
  line-height: 1.5;
}

.workCase__cta{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
}

.workCase:hover .workCase__impact{
  color: color-mix(in srgb, var(--accent), black 15%);
}

/* RIGHT */
.workCase__media{
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05); /* Subtle border definition */
  transition: transform .35s ease;
}

.workCase:hover .workCase__media{
  transform: scale(1.015);
}

.workCase__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================
   HOME — ABOUT
   ================================ */
.about{border-top:1px solid var(--lineSoft);padding:120px 0;}
.about__grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:start;}
@media (min-width:1024px){.about__grid{grid-template-columns:1.15fr .85fr;gap:72px;}}

.about__title{
  margin:0;
  font-size:44px;
  font-weight:800;
  letter-spacing:-0.03em;
  line-height: 1;
}
@media (min-width:768px){.about__title{font-size:56px;}}

/* READABILITY FIX: Increased weight from 300 to 400 */
.about__body{
  margin-top:24px;
  font-size:18px;
  line-height:1.7;
  font-weight:400; /* Regular weight for better legibility */
  max-width:88ch;
  color: #333;
}
.about__body p{margin:0 0 20px 0;}

.about__closing{margin-top:24px;padding-left:20px;border-left:3px solid var(--accent);}
.about__closing p{margin:0;color:#111;font-weight:500;}

.about__cta{margin-top:32px;}
.aboutSide{padding-top:8px;}

.panel{margin-bottom:40px;}
.panel__title{
    padding-bottom:10px;
    border-bottom:1px solid var(--lineSoft);
    color:#111;
    font-weight:800;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.panel__desc{margin:12px 0 16px 0;font-size:14px;line-height:1.6;color:#555;}

/* INTERSECTION BOX */
.intersection-box {
  border: none;
  border-left: 3px solid var(--accent);
  background: linear-gradient(to right, rgba(255,255,255,0.6), transparent);
  margin-top: 24px;
  padding-left: 0;
}

.intersection-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--lineSoft);
  transition: all 0.2s ease;
}

.intersection-row:first-child {border-top: 1px solid var(--lineSoft);}

.intersection-row:hover {
  background: rgba(255,255,255, 0.8);
  padding-left: 24px;
}

.int-skill {
  font-size: 13px;
  font-weight: 700; 
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.int-role {
  font-size: 11px;
  color: #777; /* Ensure it's visible */
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.intersection-row:hover .int-role {color: var(--accent);}
.panel--intersection .panel__title {border-bottom: none;padding-bottom: 0;margin-bottom: 4px;color: var(--accent);}


.map{margin-top:10px;display:grid;gap:10px;}
.mapRow{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:18px;padding:6px 0;}
.mapLeft{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#222;}
.mapRight{font-size:12px;letter-spacing:.05em;text-transform:uppercase;text-align:right;color:#666;}

.timeline{list-style:none;padding:0;margin:12px 0 0 0;display:grid;gap:14px;}
.timelineItem{padding-top:12px;border-top:1px solid var(--lineSoft);}
.timelineMain{display:flex;flex-direction:column;gap:4px;}
.timelineTitle{font-weight:700;color:#111;font-size:15px;}
.timelineSub{font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#555;}

.panel--toolkit{margin-top:6px;}
.toolkit{margin-top:14px;display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:900px){.toolkit{grid-template-columns:repeat(3,1fr);gap:18px;}}
.toolkitCol{display:flex;flex-direction:column;min-width:0;}
.toolkitCol__title{margin:0 0 10px 0;font-size:12px;letter-spacing:0.05em;text-transform:uppercase;font-weight:700;color:#111;}
.toolkitList{list-style:none;padding:0;margin:0;display:grid;grid-auto-rows:1fr;gap:8px;align-content:stretch;height:100%;}
.toolkitItem{
  position:relative;display:flex;align-items:center;min-height:44px;
  padding:10px 10px 10px 14px;border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.5);font-size:13px;font-weight:500;color:#111;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:520px){.toolkitItem{white-space:normal;min-height:52px;line-height:1.25;}}
.toolkitItem::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);}
.toolkitItem:hover{background:rgba(255,255,255,.8);border-color:rgba(17,17,17,.2);}

/* ================================
   HOME — CONTACT
   ================================ */

.contact{
  border-top:1px solid var(--line);
  background:#fff;
  padding:80px 0;
}

.contact__intro{margin-bottom:4rem;}
.contact__kicker{display:block;margin-bottom:1rem;color:#666;font-size:13px;letter-spacing:0.05em;font-weight:600;}

.contact__title{
  margin:0 0 1.5rem 0;
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:0.95;
  font-size:clamp(44px, 4.5vw, 72px);
}

.contact__mail{
  display:inline-block;
  font-size:clamp(1.5rem, 3vw, 2.5rem);
  font-weight:500;
  color:#111;
  text-decoration:none;
  border-bottom:2px solid #111; /* Thicker underline for action */
  padding-bottom:2px;
}
.contact__mail:hover{color:var(--accent);border-color:var(--accent);}

.contact__footerGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:3rem;
  border-top:1px solid var(--lineSoft);
  padding-top:3rem;
}

.contact__brand{display:block;margin-bottom:.5rem;font-size:1rem;font-weight:700;}
.contact__desc{font-size:.95rem;line-height:1.5;color:#555;max-width:220px;}
.contact__label{display:block;margin-bottom:1rem;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:#888;}
.contact__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.8rem;}
.contact__list a{font-size:.95rem;font-weight:500;transition:color 0.2s;}
.contact__list a:hover{color:var(--accent);}

.contact__status{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  border:1px solid var(--lineSoft);border-radius:50px;background:#fafafa;
}
.contact__statusDot{width:8px;height:8px;background:#10B981;border-radius:50%;}


/* =========================================
   CASE SYSTEM — Movements (A–E)
   Refined Typography
   ========================================= */

.movement{scroll-margin-top:110px;}

.caseMain{
  padding-top: calc(var(--space-xl) - 8px);
  padding-bottom: var(--space-xl);
}

/* Base movement */
.movement{
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--lineSoft);
}
.movement:last-of-type{border-bottom:none;}

/* Movement header/body */
.movement__header{display:grid;gap:24px;} /* Increased gap */

.movement__title{
  margin:0;
  font-weight:900;
  letter-spacing:-0.035em;
  line-height:1.1;
  font-size: clamp(34px, 4.2vw, 56px);
  max-width: 24ch;
  color: #111;
}

/* READABILITY FIX: Increased weight and contrast */
.movement__subtitle{
  margin:0;
  font-size:19px; /* Bumped from 18 */
  line-height:1.6;
  font-weight:400; /* Regular weight */
  color:#222; /* High contrast */
  max-width: 78ch;
}

/* Section Mini-Titles (Context, Vision, etc) */
.movement__sectionTitle {
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 12px;
}

.movement__body{
  font-size:18px;
  line-height:1.75;
  font-weight:400; /* Regular weight */
  color:#333; /* Darker gray */
  max-width: 80ch;
}
.movement__body p{margin:0 0 24px 0;} 
.movement__body p:last-child{margin-bottom:0;}
.movement__body strong { color: #000; font-weight: 700; }

/* Role variants */
.movement--declaration{padding-top: var(--space-xl);padding-bottom: var(--space-lg);}
.movement--context{padding-top: var(--space-md);padding-bottom: var(--space-md);}
.movement--context .movement__body{max-width: 70ch;}
.movement--decision{padding-block: var(--space-lg);}
.movement--system{padding-block: var(--space-xl);}
.movement--closure{padding-top: var(--space-xl);padding-bottom: var(--space-xl);}
.movement--closure .movement__body{max-width: 65ch;}

/* Movement layout grid */
.movement__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items:start;
}
@media (min-width:1024px){
  .movement__grid{
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items:center;
  }
}

/* Media roles */
.movement-media{
  margin:0;
  border:1px solid var(--lineSoft);
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius: 4px; /* Slight radius */
}
.movement-media img{display:block;width:100%;height:100%;object-fit:cover;}

.movement-media--hero{aspect-ratio: 16 / 9;margin-top: var(--space-md);}
.movement-media--primary{aspect-ratio: 16 / 9;margin-top: var(--space-md);}
.movement-media--supporting{aspect-ratio: 4 / 3;margin-top: var(--space-sm);}

/* Caption */
.movement-caption{
  margin:0;
  padding:12px 14px;
  border:1px solid var(--lineSoft);
  border-top:none;
  background:#fafafa;
  color:#6b7280;
  font-size:12px;
  letter-spacing:.05em;
  font-weight: 500;
}

/* Case meta row */
.caseMeta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:baseline;
  margin-top: var(--space-xs);
  margin-bottom: 8px;
}
.caseMeta .mono-label{color:#555; font-weight: 600;}
.caseMeta__dot{color:#d1d5db;}

/* Case nav */
.caseNav{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  padding-top: var(--space-lg);
  margin-top: var(--space-md);
  border-top: 1px solid var(--lineSoft);
}
.caseNav__backLink{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#888;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.caseNav__backLink:hover{color:#111;border-color:#111;}
.caseNav__next{text-align:right;max-width:44ch;}
.caseNav__nextLink{display:inline-block;margin-top:8px;}
.caseNav__nextTitle{
  display:block;
  font-size:20px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height: 1.2;
}
.caseNav__nextLink:hover .caseNav__nextTitle{color:var(--accent);}

/* =========================================
   MEDIA — VARIABLE RATIO SUPPORT
   ========================================= */

.movement-media[data-ratio="vertical"]{aspect-ratio: 3 / 4;}
.movement-media[data-fit="contain"] img{object-fit: contain;background: #fff;}

/* Vertical MVP container (Catalog) */
.movement-media--mvp {
  aspect-ratio: 4 / 5;
  max-width: 680px;
  margin-inline: auto;
  background: #ffffff;
}
.movement-media--mvp img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}
@media (min-width: 1200px) {
  .movement-media--mvp {max-width: 760px;}
}

/* ================================
   ABOUT FIXES (Clean & Editorial)
   ================================ */

/* Intersection Box (El único elemento con acento fuerte) */
.intersection-box {
  border: none;
  border-left: 3px solid var(--accent);
  background: linear-gradient(to right, rgba(255,255,255,0.6), transparent);
  margin-top: 16px;
  padding-left: 0;
}

.intersection-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px; /* Más compacto */
  border-bottom: 1px solid var(--lineSoft);
  transition: all 0.2s ease;
}
.intersection-row:first-child { border-top: 1px solid var(--lineSoft); }
.intersection-row:hover { background: rgba(255,255,255, 0.8); padding-left: 24px; }

/* Timeline (Background) - Limpio y minimalista */
.timeline {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
  display: grid;
  gap: 0;
}
.timelineItem {
  padding: 12px 0;
  border-bottom: 1px solid var(--lineSoft);
  border-top: none; /* Quitamos bordes dobles */
}
.timelineItem:first-child { border-top: 1px solid var(--lineSoft); }

.timelineTitle { font-size: 14px; font-weight: 700; color: #111; }
.timelineSub { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: #666; margin-top: 4px; display: block;}


/* Toolkit Chips (Reemplaza la grilla pesada) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--lineSoft); /* Borde sutil */
  background: #fff;
  color: #333;
  border-radius: 6px; /* Radio pequeño para look técnico */
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: all 0.2s ease;
}

.chip:hover {
  border-color: #999;
  transform: translateY(-1px);
}

/* RUNAS SECRETAS — Base (camuflaje universal) */
.secret-runes {
  opacity: 0.15;
  filter: grayscale(100%);
  margin-left: 1rem;
  letter-spacing: 0.5em;
  font-weight: 400;
  font-size: 0.8em;
  cursor: default;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  display: inline-block;
}

/* DESKTOP REAL — solo cuando existe hover */
@media (hover: hover) and (pointer: fine) {
  .contact__brand:hover .secret-runes {
    opacity: 1;
    filter: grayscale(0%);
    color: #FF4D00;
    letter-spacing: 1em;
    transform: scale(1.1);
  }
}

/* MOBILE / TOUCH — visibles, sin espectáculo */
@media (hover: none) and (pointer: coarse) {
  .secret-runes {
    opacity: 0.18;          /* existen, pero no llaman */
    margin-left: 1rem;
    letter-spacing: 0.35em;
    transform: none;
  }
}

/* ================================
   VISUAL CRAFT SECTION (RESPONSIVE BENTO)
   ================================ */

.craft {
  padding-bottom: 120px;
  border-bottom: 1px solid var(--lineSoft);
}

.craft__grid {
  display: grid;
  grid-template-columns: 1fr; /* MOBILE FIRST: 1 sola columna vertical */
  gap: 24px; /* Espacio estándar en móvil */
}

/* ESTILOS DE LA TARJETA (BASE) */
.craft-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--lineSoft);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  height: auto; /* En móvil la altura es automática según el contenido */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.craft-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,0,0,0.3);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

/* MEDIA CONTAINER */
.craft-card__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 4/3; /* En móvil, todas son rectangulares estándar */
  background: #f4f4f4;
  border-bottom: 1px solid var(--lineSoft);
  position: relative;
  overflow: hidden;
}

.craft-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que llenen el cuadro sin deformarse */
  display: block;
  transition: transform 0.5s ease;
}

.craft-card:hover .craft-card__media img {
  transform: scale(1.03);
}

/* INFO CONTAINER */
.craft-card__info {
  padding: 16px 20px;
  background: #fff;
}

.craft-card__title {
  display: block;
  font-size: 15px; /* Un poco más grande para legibilidad */
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}

.craft-card__meta {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* =========================================
   DESKTOP LAYOUT (TABLET & UP - 768px+)
   Aquí activamos la magia "Bento"
   ========================================= */
@media (min-width: 768px) {
  
  .craft__grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    grid-auto-rows: minmax(280px, auto); /* Altura mínima para consistencia */
    gap: 32px;
  }

  .craft-card {
    height: 100%; /* Ahora sí llenan la altura de la celda */
  }

  /* === EL HERO (Easy Future) === */
  /* Ocupa 2 columnas de ancho y 2 filas de alto */
  .craft-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* En desktop, la imagen del Hero debe crecer para llenar el espacio vertical */
  .craft-card:nth-child(1) .craft-card__media {
    aspect-ratio: auto; /* Desactiva el 4/3 forzado */
    flex-grow: 1; /* Empuja el footer hacia abajo */
    height: 100%; /* Ocupa todo el alto disponible */
  }

  /* === LOS CUADRADOS (El resto) === */
  /* Forzamos que los items pequeños sean perfectamente cuadrados en desktop */
  .craft-card:not(:nth-child(1)) .craft-card__media {
    aspect-ratio: 1 / 1; 
  }
}