/* ============================================================
   Caso de estudio — Bruma Café
   Hereda de styles.css (cabecera, variables del sitio, Inter
   Tight); añade la voz propia del caso: serif Fraunces y la
   paleta canónica de Bruma (la del código del patrón).
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Italic-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}

.caso {
  /* Paleta canónica de Bruma: los tres colores del código p5 */
  --b-beige: #ffeecf;
  --b-marron: #421907;
  --b-arcilla: #b37a62;
  --b-serif: "Fraunces", Georgia, serif;
}

/* ---------- Retícula editorial ---------- */

.caso-seccion {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(5rem, 10vh, 8.5rem) clamp(1.4rem, 4vw, 4rem);
}

.g12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}

.caso img {
  display: block;
  width: 100%;
  height: auto;
}

.seccion-cabecera {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  margin-bottom: clamp(2rem, 4vh, 3.2rem);
}

.seccion-num {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--b-arcilla);
}

.seccion-titulo {
  font-family: var(--b-serif);
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight: 400;
  color: var(--b-marron);
  line-height: 1.1;
}

.parrafo-destacado {
  font-family: var(--b-serif);
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-ink);
  max-width: 24em;
  margin-bottom: clamp(2.4rem, 5vh, 4rem);
}

.caso p {
  line-height: 1.7;
}

.caso-seccion .g12 p {
  color: var(--color-text-muted);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  max-width: 34em;
}

.caso-seccion .g12 p + p {
  margin-top: 1em;
}

/* ---------- Revelado suave al hacer scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* ---------- 01 · Hero ---------- */

.caso-hero-img img {
  width: 100%;
  height: min(78svh, 720px);
  object-fit: cover;
}

.caso-marco {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 5rem) clamp(1.4rem, 4vw, 4rem) 0;
}

.caso-etiqueta {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--b-arcilla);
  margin-bottom: 1.2rem;
}

.caso-titulo {
  font-family: var(--b-serif);
  font-style: italic;
  font-size: clamp(3rem, 8.5vw, 7rem);
  font-weight: 500;
  color: var(--b-marron);
  line-height: 1.02;
  margin-bottom: 1rem;
}

.caso-subtitulo {
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.caso-claim {
  font-family: var(--b-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  color: var(--b-arcilla);
  margin-top: 1.4rem;
}

.caso-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.6rem 2rem;
  border-top: 1px solid rgba(66, 25, 7, 0.18);
  margin-top: clamp(2rem, 4vh, 3rem);
  padding-top: 1.6rem;
}

.caso-ficha dt {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.caso-ficha dd {
  font-size: 0.92rem;
  color: var(--color-ink);
  line-height: 1.5;
}

.ficha-servicios {
  grid-column: span 2;
}

/* ---------- Sub-navegación sticky ---------- */

.caso-subnav {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  padding: 0.9rem 1rem;
  margin-top: clamp(2rem, 4vh, 3.5rem);
  background-color: rgba(255, 244, 233, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(66, 25, 7, 0.12);
  border-bottom: 1px solid rgba(66, 25, 7, 0.12);
}

.caso-subnav a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.caso-subnav a:hover,
.caso-subnav a.is-current {
  color: var(--b-marron);
  border-bottom-color: var(--b-arcilla);
}

/* ---------- 02 · Concepto ---------- */

.concepto-composicion {
  align-items: start;
}

.concepto-img-a {
  grid-column: 1 / 7;
}

.concepto-texto {
  grid-column: 8 / 12;
  padding-top: clamp(1rem, 6vh, 4rem);
}

.concepto-img-b {
  grid-column: 8 / 12;
  margin-top: clamp(1.5rem, 4vh, 3rem);
}

/* ---------- 03 · Sistema generativo ---------- */

.caso-seccion--sistema {
  max-width: none;
  background-color: var(--b-beige);
}

.caso-seccion--sistema > * {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.sistema-pasos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 4vw, 3.5rem);
  list-style: none;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.sistema-pasos li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.sistema-pasos li:not(:last-child)::after {
  content: "→";
  margin-left: clamp(1rem, 4vw, 3.5rem);
  color: var(--b-arcilla);
}

.sistema-pasos span {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--b-arcilla);
}

.sistema-pasos em {
  font-family: var(--b-serif);
  font-style: normal;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  color: var(--b-marron);
}

.sistema-codigo-fila {
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.sistema-codigo {
  grid-column: 1 / 8;
}

.sistema-texto {
  grid-column: 9 / 13;
  padding-top: 0.5rem;
}

.codigo {
  background-color: var(--b-marron);
  color: var(--b-beige);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.62rem, 0.95vw, 0.78rem);
  line-height: 1.6;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border-radius: 10px;
  overflow-x: auto;
}

.codigo .cmt {
  color: var(--b-arcilla);
}

.sistema-nota {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.8rem;
}

.patron-marco {
  position: relative;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.patron-lienzo {
  display: block;
  width: 100%;
  height: clamp(340px, 62vh, 640px);
  border-radius: 10px;
  background-color: var(--b-beige);
  box-shadow: 0 10px 40px rgba(66, 25, 7, 0.12);
}

.patron-regenerar {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b-beige);
  background-color: var(--b-marron);
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.patron-regenerar:hover {
  background-color: #2c1004;
}

.sistema-aplicacion {
  align-items: center;
}

.sistema-aplicacion-texto {
  grid-column: 1 / 5;
}

.sistema-aplicacion figure {
  grid-column: 6 / 13;
}

/* ---------- 04 · Identidad ---------- */

.identidad-logo {
  max-width: 620px;
  margin: 0 auto clamp(2.5rem, 5vh, 4rem);
  text-align: center;
}

.identidad-logo img {
  border-radius: 12px;
}

.identidad-logo-nota,
.especimen-nota {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 0.9rem;
}

#identidad .parrafo-destacado {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.identidad-tabla {
  row-gap: 3rem;
}

.identidad-bloque {
  grid-column: span 4;
}

.identidad-bloque h3 {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--b-arcilla);
  margin-bottom: 1.4rem;
}

.paleta {
  list-style: none;
}

.paleta li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.45rem 0;
}

.paleta .muestra {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(66, 25, 7, 0.15);
  flex: 0 0 auto;
}

.paleta em {
  font-family: var(--b-serif);
  font-style: normal;
  font-size: 1.05rem;
  color: var(--color-ink);
  min-width: 7em;
}

.paleta code {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.especimen-serif {
  font-family: var(--b-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--b-marron);
  line-height: 1.2;
}

.especimen-sans {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--color-ink);
  margin-top: 1.6rem;
}

.patron-mini {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background-color: var(--b-beige);
}

/* ---------- Composiciones de imagen ---------- */

.img-protagonista {
  margin: 0 auto;
}

.packaging-detalle {
  margin-top: clamp(2rem, 4vh, 3.2rem);
  align-items: start;
}

.packaging-texto {
  grid-column: 1 / 6;
}

.lista-piezas {
  grid-column: 8 / 13;
  list-style: none;
  columns: 2;
  gap: 2rem;
}

.lista-piezas li {
  font-family: var(--b-serif);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  color: var(--b-marron);
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(66, 25, 7, 0.14);
  break-inside: avoid;
}

.papeleria-composicion {
  align-items: start;
}

.papeleria-img-a {
  grid-column: 1 / 8;
}

.papeleria-lado {
  grid-column: 9 / 13;
  padding-top: clamp(1rem, 8vh, 5rem);
}

.papeleria-lado figure {
  margin-top: 1.6rem;
}

.espacio-composicion {
  margin-top: clamp(2rem, 4vh, 3.2rem);
  align-items: center;
}

.espacio-texto {
  grid-column: 1 / 5;
}

.espacio-img-b {
  grid-column: 7 / 12;
}

/* ---------- 08 · Campaña ---------- */

.campana-claim {
  font-family: var(--b-serif);
  font-style: italic;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  font-weight: 300;
  color: var(--b-arcilla);
  line-height: 1.05;
  margin-bottom: clamp(2rem, 4vh, 3rem);
  white-space: pre-line;
}

/* ---------- 09 · Social ---------- */

.social-composicion {
  align-items: center;
}

.social-feed {
  grid-column: 1 / 8;
}

.social-texto {
  grid-column: 9 / 13;
}

/* ---------- 10 · Urbana ---------- */

.urbana-composicion {
  align-items: center;
}

.urbana-texto {
  grid-column: 1 / 5;
  order: 0;
}

.urbana-img {
  grid-column: 6 / 12;
}

/* ---------- 11 · Cierre ---------- */

.caso-cierre {
  background-color: var(--b-marron);
  text-align: center;
  padding: clamp(6rem, 16vh, 10rem) 1.5rem;
}

.cierre-marca {
  font-family: var(--b-serif);
  font-style: italic;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 500;
  color: var(--b-beige);
  line-height: 1.05;
}

.cierre-claim {
  font-family: var(--b-serif);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--b-arcilla);
  margin-top: 1.2rem;
}

.cierre-meta {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 238, 207, 0.55);
  margin-top: 2.2rem;
}

.caso-pie {
  display: flex;
  justify-content: center;
  padding: 2.5rem 1rem 3rem;
}

/* ---------- Móvil y tablet ---------- */

@media (max-width: 1024px) {
  .sistema-codigo { grid-column: 1 / 13; }
  .sistema-texto { grid-column: 1 / 13; padding-top: 0; }
  .identidad-bloque { grid-column: span 6; }
  .identidad-bloque--patron { grid-column: 4 / 10; }
}

@media (max-width: 860px) {
  /* Composiciones editoriales re-pensadas: protagonista a sangre y
     secundarias escalonadas con sangrías alternas — nada de grid 2×2. */
  .g12 {
    display: block;
  }

  .concepto-img-a { width: 88%; }
  .concepto-texto { width: 84%; margin: 1.8rem 0 0 auto; padding-top: 0; }
  .concepto-img-b { width: 62%; margin: 2rem 0 0 auto; }

  .sistema-texto { margin-top: 1.6rem; }
  .sistema-aplicacion-texto { margin-bottom: 1.4rem; }

  .identidad-bloque + .identidad-bloque { margin-top: 2.6rem; }
  .ficha-servicios { grid-column: span 1; }

  .packaging-texto { margin-bottom: 1.6rem; }
  .lista-piezas { columns: 2; }

  .papeleria-img-a { width: 100%; }
  .papeleria-lado { width: 82%; margin: 1.8rem 0 0 auto; padding-top: 0; }

  .espacio-texto { margin-bottom: 1.6rem; }
  .espacio-img-b { width: 82%; margin-left: auto; }

  .social-feed { width: 100%; }
  .social-texto { width: 84%; margin: 1.8rem auto 0 0; }

  .urbana-texto { margin-bottom: 1.6rem; }
  .urbana-img { width: 88%; margin-left: auto; }

  .caso-hero-img img { height: 52svh; }
  .caso-subnav { justify-content: flex-start; overflow-x: auto; }
  .patron-lienzo { height: 52svh; }
  .patron-regenerar { position: static; margin-top: 1rem; }
}