/* Milena Jasso — Caso de estudio "Chivo gruñón" (Figma node 389:3597)
   Tipografías: títulos/enunciados -> "Editor's Note" (serif); UI/cuerpo -> "Aktiv Grotesk".
   Las @font-face y los tokens (--serif, --grotesk, --ink, --light, --gutter, --maxw)
   ya están declarados en styles.css; esta hoja solo los usa. */

body.page-chivo{background:var(--light);font-family:var(--grotesk)}

/* Header: mismo blanco que el fondo de las páginas (#FCFCFC = var(--light));
   nav en grotesca (Aktiv Grotesk), como el resto de case studies. */
.page-chivo .header{background:var(--light)}
.page-chivo .nav{font-family:var(--grotesk)}
.page-chivo .site-footer{border-top:.5px solid #000}

/* ---- Contenedor del caso (contenido interior = 1280) ---- */
.case{max-width:calc(var(--maxw) + 2*var(--gutter));margin:0 auto;padding:80px var(--gutter) 0}

/* ---- Hero del caso ---- */
.case-hero{display:flex;flex-direction:column;gap:80px}
.case-hero__head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;max-width:813px;margin:0 auto}
.case-hero__title{font-family:var(--serif);font-weight:400;font-size:64px;line-height:1.1;color:var(--ink)}
.case-hero__tagline{font-family:var(--grotesk);font-weight:700;font-size:20px;color:var(--ink)}
.case-hero__tags{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;
  font-family:var(--grotesk);font-weight:400;font-size:16px;text-transform:uppercase;color:var(--ink);
}

.case-hero__body{display:flex;flex-direction:column;gap:80px}
.case-shot{width:100%;height:auto;display:block}

/* Bloque texto (enunciado + brief), gap 160 como en Figma */
.case-hero__text{display:flex;flex-direction:column;gap:160px}

/* Enunciado serif 40 */
.case-lead{
  font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.3;
  text-align:center;color:var(--ink);max-width:1064px;margin:0 auto;
}

/* ---- Brief: columna izquierda (Product/Challenge/Solution) + columna Role ---- */
.brief{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
/* 744px (no 738 exactos): la Aktiv Grotesk en woff2 renderiza ~2px más ancha que en
   Figma y "variety." caía a una 3ª línea; con 744 el SOLUTION queda en 2 líneas como el diseño. */
.brief__main{flex:0 1 744px;display:flex;flex-direction:column;gap:32px}
.brief__role{flex:0 0 236px;display:flex;flex-direction:column;gap:16px}
.brief__block{display:flex;flex-direction:column;gap:16px}
.brief__label{font-family:var(--grotesk);font-weight:700;font-size:20px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink)}
.brief__label--role{font-size:18px}
.brief__text{font-family:var(--grotesk);font-weight:400;font-size:20px;line-height:1.5;color:var(--ink)}
.brief__text strong{font-weight:700}

/* ---- Galería de imágenes full-width del caso ---- */
.gallery{display:flex;flex-direction:column;gap:80px;margin-top:80px}
.gallery img{width:100%;height:auto;display:block}

/* ---- Créditos (enunciado final antes del footer) ---- */
.credits{margin:80px 0}
.credits__rule{display:block;width:200px;height:1px;background:var(--ink);margin-bottom:24px}
.credits__text{font-family:var(--grotesk);font-weight:400;font-size:16px;line-height:1.7;color:var(--ink)}

/* ---- Responsive ---- */
@media (max-width:1024px){
  :root{--gutter:48px}
  .case{padding-top:48px}
  .case-hero{gap:56px}
  .case-hero__body{gap:56px}
  .case-hero__text{gap:100px}
  .case-hero__title{font-size:52px}
  .case-lead{font-size:32px}
  .brief{gap:40px}
  .gallery{gap:56px;margin-top:56px}
}
@media (max-width:768px){
  :root{--gutter:24px}
  /* El header/nav móvil (hamburguesa) lo controla styles.css */
  .case-hero{gap:40px}
  .case-hero__body{gap:40px}
  .case-hero__text{gap:72px}   /* intro → brief, igual que Priordei */
  .case-hero__title{font-size:40px}
  .case-hero__tagline{font-size:18px}
  .case-hero__tags{font-size:14px;gap:12px}
  .case-lead{font-size:26px}
  /* Brief apila: primero los bloques, luego Role */
  .brief{flex-direction:column;gap:32px}
  .brief__main{flex:none;max-width:none;width:100%}
  .brief__role{flex:none;max-width:none;width:100%}
  .brief__label{font-size:18px}
  .brief__text{font-size:18px}
  .gallery{gap:40px;margin-top:72px}   /* brief → primera imagen, igual que Priordei */
  .credits{margin:56px 0}
}