/* mktn.es · /consultor-seo/: dos secciones de Claude Design ("Consultor SEO A": tres niveles y casos en fila)
   Razones sobre aguamarina: "Ejecuto, no solo aconsejo" en panel verde (la tesis), dos razones con filete grueso y tres más pequeñas.
   Proyectos sobre crema: tres tarjetas horizontales iguales con la captura de Search Console entera en un marco blanco 16:9.
   Medidas de las entregas a 1440, 1024 y 375 px. Sin degradados ni sombras. Generado por tools/servicio.py. */

.cs-why { background: #D7EDE8; padding: 64px var(--gut); }
.cs-cases { background: #F4F3EF; padding: 64px var(--gut); }
.cs-eyb { margin: 0 0 20px; font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5E5D58; }
.cs-why .cs-eyb { color: #1F3A30; }
.cs-why h2, .cs-cases h2 { margin: 0; font-size: 36px; line-height: 1.02; font-weight: 600; letter-spacing: -.04em; text-wrap: balance; max-width: 11em; }
.cs-why a:focus-visible, .cs-cases a:focus-visible { outline: 2px solid #161616; outline-offset: 3px; }

/* ── Razones ─────────────────────────────────────────────── */
.cs-why-h { display: flex; flex-direction: column; gap: 20px; }
.cs-why-i { margin: 0; font-size: 17px; line-height: 1.55; color: #161616; max-width: 32em; text-wrap: pretty; }
.cs-why-i strong { font-weight: 700; }
.cs-why-g { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.cs-r1 { background: #1F3A30; color: #F4F3EF; border-radius: 6px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
.cs-r1 h3 { margin: 0; font-size: 28px; line-height: 1.05; font-weight: 600; letter-spacing: -.035em; color: #F4F3EF; text-wrap: balance; }
.cs-r1 p { margin: 0; font-size: 16px; line-height: 1.55; color: #F4F3EF; max-width: 30em; text-wrap: pretty; }
.cs-r2 { border-top: 2px solid #161616; padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.cs-r2 h3 { margin: 0; font-size: 22px; line-height: 1.12; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.cs-r2 p { margin: 0; font-size: 16px; line-height: 1.55; color: #161616; max-width: 34em; text-wrap: pretty; }
.cs-r3 { border-top: 1px solid #1F3A30; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cs-r3 h3 { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.cs-r3 p { margin: 0; font-size: 15px; line-height: 1.55; color: #5E5D58; text-wrap: pretty; }

/* ── Proyectos ───────────────────────────────────────────── */
.cs-case-l { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.cs-case { display: grid; box-sizing: border-box; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'img' 'tipo' 'name' 'frase' 'link'; row-gap: 10px; padding: 16px 16px 8px; background: #E9E7E1; border: 1px solid #D8D6CF; border-radius: 6px; overflow: hidden; text-decoration: none; color: #161616; transition: background-color .15s, border-color .15s; }
.cs-case:hover { background: #DDDBD3; border-color: #5E5D58; }
.cs-fr { grid-area: img; aspect-ratio: 16 / 9; background: #FFFFFF; border: 1px solid #D8D6CF; border-radius: 6px; padding: 6px; box-sizing: border-box; margin-bottom: 6px; }
.cs-fr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cs-tipo { grid-area: tipo; margin: 0; font-size: 13px; line-height: 1.35; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5E5D58; }
.cs-case h3 { grid-area: name; margin: 0; font-size: 22px; line-height: 1.08; font-weight: 600; letter-spacing: -.03em; }
.cs-case .d { grid-area: frase; margin: 0; font-size: 16px; line-height: 1.55; color: #5E5D58; text-wrap: pretty; max-width: 34em; }
.cs-go { grid-area: link; align-self: end; display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; }
.cs-go span:first-child { text-decoration: underline; text-decoration-color: #1F3A30; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cs-go span + span { display: inline-block; margin-left: 3px; transition: transform .15s; }
.cs-case:hover .cs-go span + span { transform: translateX(4px); }

/* ── 640 a 1279 px ───────────────────────────────────────── */
@media (min-width: 640px) {
  .cs-why { padding: 96px var(--gut); }
  .cs-cases { padding: 96px var(--gut); }
  .cs-why h2, .cs-cases h2 { font-size: 52px; }
  .cs-why-i { font-size: 18px; }
  .cs-why-g { margin-top: 56px; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 20px; }
  .cs-r1 { grid-column: 1 / -1; padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
  .cs-r1 h3 { font-size: 36px; }
  .cs-r1 p { font-size: 18px; }
  .cs-r2:nth-of-type(2) { grid-column: 1 / 7; }
  .cs-r2:nth-of-type(3) { grid-column: 7 / 13; }
  .cs-r3:nth-of-type(4) { grid-column: 1 / 5; }
  .cs-r3:nth-of-type(5) { grid-column: 5 / 9; }
  .cs-r3:nth-of-type(6) { grid-column: 9 / 13; }
  .cs-r2 { padding-top: 24px; }
  .cs-r2 h3 { font-size: 26px; }
  .cs-r2 p { font-size: 17px; }
  .cs-r3 { padding-top: 20px; }
  .cs-r3 h3 { font-size: 20px; }
  .cs-r3 p { font-size: 16px; }
  .cs-case-l { margin-top: 48px; gap: 20px; }
  .cs-case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: 'img img' 'tipo frase' 'name frase' '. link'; grid-template-rows: auto auto 1fr auto; column-gap: 32px; row-gap: 10px; padding: 0 0 28px; }
  .cs-fr { border: 0; border-bottom: 1px solid #D8D6CF; border-radius: 0; padding: 16px; margin-bottom: 18px; }
  .cs-tipo, .cs-case h3 { padding-left: 32px; }
  .cs-case h3 { font-size: 30px; }
  .cs-case .d { padding-right: 32px; font-size: 17px; }
  .cs-go { padding-right: 32px; }
}
@media (min-width: 1024px) {
  .cs-why-h { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; align-items: end; }
  .cs-why-i { font-size: 18px; }
}

/* ── 1280 px ─────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .cs-why, .cs-cases { padding: 120px var(--gut); }
  .cs-why h2, .cs-cases h2 { font-size: 64px; }
  .cs-why-h { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .cs-why-i { font-size: 19px; }
  .cs-why-g { margin-top: 72px; gap: 48px 24px; }
  .cs-r1 { grid-column: 1 / 7; grid-row: 1 / 3; padding: 48px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 16px; min-height: 420px; box-sizing: border-box; }
  .cs-r1 h3 { font-size: 44px; }
  .cs-r1 p { font-size: 19px; }
  .cs-r2:nth-of-type(2) { grid-column: 7 / 13; grid-row: 1; align-self: end; }
  .cs-r2:nth-of-type(3) { grid-column: 7 / 13; grid-row: 2; align-self: end; }
  .cs-r2 h3 { font-size: 28px; }
  .cs-r3:nth-of-type(n+4) { grid-row: 3; }
  .cs-case-l { margin-top: 56px; gap: 24px; }
  .cs-case { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: 'img tipo' 'img name' 'img frase' 'img link'; grid-template-rows: auto auto auto 1fr; column-gap: 40px; row-gap: 12px; padding: 0 40px 0 0; }
  .cs-fr { border-bottom: 0; border-right: 1px solid #D8D6CF; margin-bottom: 0; }
  .cs-tipo { margin-top: 40px; padding-left: 0; }
  .cs-case h3 { padding-left: 0; font-size: 32px; }
  .cs-case .d { padding-right: 0; }
  .cs-go { padding-right: 0; margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) { .cs-case, .cs-go span { transition: none !important; } }