/* ==========================================================
   Creative Center — Web Institucional
   Tokens adapted from the Creative Center Design System
   (Space Grotesk for identity/hierarchy, Inter for body/UI).
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Brand orange */
  --orange-500: #F98105;
  --orange-600: #E06F00;
  --orange-700: #B85700;

  /* Ink / neutrals */
  --ink-900: #0E0E0E;
  --gray-500: #6E6E76;
  --gray-400: #9A9AA2;
  --gray-300: #C9C9CF;

  /* Paper (light register) */
  --paper-900: #F8F6F2;
  --paper-800: #F1EDE5;
  --paper-700: #E7E1D5;
  --paper-card: #FFFFFF;
  --ink-on-paper: #1B1B1D;
  --ink-on-paper-muted: #5B5C60;
  --ink-on-paper-faint: #8A8A8F;

  /* Graphite (dark register) */
  --graphite-900: #0D0F12;
  --graphite-card: #13171D;
  --tech-700: #2A3038;
  --tech-600: #5F646D;
  --tech-500: #8C8F94;
  --warm-white-3: #D9D9D9;

  /* Mundo (service) accents */
  --mundo-paid: #3E6291;
  --mundo-ecommerce: #668172;
  --mundo-branding: #D75A7F;
  --mundo-analytics: #287C78;
  --mundo-redes: #795A82;

  /* Type */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Radius / shadow / motion */
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-card: 0 18px 40px rgba(14,14,14,0.09);
  --shadow-card-lg: 0 20px 44px rgba(14,14,14,0.10);
  --ease: cubic-bezier(0.2,0,0,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper-900);
  color: var(--ink-on-paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--ink-on-paper); text-decoration: none; }
input, textarea, select, button { font-family: var(--font-body); }
img { max-width: 100%; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 900px) {
  .container { padding: 0 24px; }
}

/* ---- Header / nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248,246,242,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-700);
}
.site-header .container {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}
.brand-logo { display: flex; align-items: center; }
.brand-logo img { height: 34px; width: auto; display: block; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
}
.nav-link { color: var(--ink-on-paper); transition: color 150ms var(--ease); }
.nav-link:hover, .nav-link.is-active { color: var(--orange-600); }

/* ---- Buttons / links ---- */
.btn {
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  transition: all 200ms var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--orange-500);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(249,129,5,0.28);
}
.btn-primary:hover { background: var(--orange-600); color: #FFFFFF; }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  color: var(--ink-on-paper);
  border: 1px solid var(--paper-700);
  background: #FFFFFF;
}
.btn-secondary:hover { background: var(--paper-800); }

.btn-dark { background: var(--graphite-900); color: #FFFFFF; }
.btn-dark:hover { background: #1a1e24; }

.link-arrow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--orange-700);
  cursor: pointer;
}
.link-arrow:hover { color: var(--orange-500); }

.link-muted {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-on-paper-faint);
}
.link-muted:hover { color: var(--orange-600); }

/* ---- Cards ---- */
.card {
  background: #FFFFFF;
  border: 1px solid var(--paper-700);
  border-radius: var(--radius-lg);
  transition: all 200ms var(--ease);
}
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.card-hover-flat:hover { box-shadow: var(--shadow-card-lg); }

.tag {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-on-paper-muted);
  background: var(--paper-800);
  padding: 6px 11px;
  border-radius: 999px;
}
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-700);
  background: #FFF4E8;
  padding: 8px 14px;
  border-radius: 999px;
}
.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-500);
}

/* ---- Form fields ---- */
.field {
  font-size: 15.5px;
  padding: 13px 15px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color: var(--ink-on-paper);
  outline: none;
  width: 100%;
}
.field:focus { border-color: var(--orange-500); box-shadow: 0 0 0 3px rgba(249,129,5,0.20); }
textarea.field { resize: vertical; font-family: var(--font-body); }

.radio-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ink-on-paper-muted);
  background: var(--paper-900);
  border: 1px solid var(--paper-700);
  padding: 11px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 150ms var(--ease);
}
.radio-chip:hover { border-color: var(--gray-300); }
.radio-chip input { accent-color: var(--orange-500); margin: 0; }

/* ---- Image placeholder (stand-in for photos not yet supplied) ---- */
.img-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--paper-800), var(--paper-800) 10px, var(--paper-900) 10px, var(--paper-900) 20px);
  color: var(--ink-on-paper-faint);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 20px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.img-placeholder.is-rounded { border-radius: 16px; }

/* ---- Mundo illustration ---- */
.mundo-illustration { width: 100%; height: auto; display: block; }

/* ---- Clients carousel (marquee, auto-play en todos los tamaños) ---- */
.clients-carousel { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.clients-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: clients-scroll 32s linear infinite; }
.clients-batch { display: flex; align-items: center; gap: 64px; }
.clients-carousel:hover .clients-track { animation-play-state: paused; }
.clients-track img { height: 108px; max-width: 340px; width: auto; object-fit: contain; opacity: 1; flex-shrink: 0; transition: opacity 200ms var(--ease); }
.clients-track img:hover { opacity: 0.8; }
@keyframes clients-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 560px) {
  .clients-track img { height: 72px; max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; flex-wrap: wrap; width: 100%; }
}

/* ---- Filtro por pills: usado por Ideas (.ideas-filter-pill, un tag por
   tarjeta) y por el filtro de servicio de Casos (.filter-pill, un caso
   puede caer en más de un servicio) — mismo look, .filter-pill es el
   nombre genérico para cualquier filtro nuevo que se agregue después. ---- */
.ideas-filter-pill, .filter-pill { cursor: pointer; border: 1px solid var(--paper-700); background: #FFFFFF; font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--ink-on-paper-muted); padding: 8px 14px; border-radius: 999px; transition: all 150ms var(--ease); }
.ideas-filter-pill.is-active, .filter-pill.is-active { background: var(--graphite-900); border-color: var(--graphite-900); color: #FFFFFF; }
.ideas-filter-pill:hover:not(.is-active), .filter-pill:hover:not(.is-active) { border-color: var(--gray-300); }
.idea-card[hidden], .caso-tile[hidden] { display: none !important; }

/* ---- Caso tile (photo card with logo, big metric, summary, tag) ---- */
.caso-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1.05;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 24px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.caso-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
/* Casos sin página de detalle (admin: "¿Es clickeable?" desmarcado) — sólo la
   tarjeta, sin insinuar que se puede abrir algo más. */
.caso-tile.is-static { cursor: default; }
.caso-tile.is-static:hover { transform: none; box-shadow: none; }
.caso-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.caso-tile-logo { height: 26px; width: auto; max-width: 130px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.95; }
.caso-tile-logo-text { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #FFFFFF; letter-spacing: -0.01em; }
/* Insignia "hecho en Tiendanube" — chip blanco a la derecha del logo del
   cliente para que se lea bien encima de cualquier foto de fondo (ver
   admin: check "Tiendanube" en un caso + subir el logo en Fotos del sitio). */
.caso-tile-badge { flex: 0 0 auto; background: #FFFFFF; border-radius: 7px; padding: 4px 7px; display: flex; align-items: center; line-height: 0; }
.caso-tile-badge img { height: 15px; width: auto; object-fit: contain; display: block; }
.caso-tile-bottom { color: #FFFFFF; }
.caso-tile-metric { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.caso-tile-metric-label { font-size: 13.5px; color: rgba(255,255,255,0.85); margin: 6px 0 12px; }
.caso-tile-summary { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.85); margin: 0 0 14px; }
.caso-tile-tag { display: inline-block; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: #FFFFFF; background: rgba(255,255,255,0.16); backdrop-filter: blur(4px); padding: 6px 12px; border-radius: 999px; }

/* ---- "otros casos" carousel: 2 filas x 3 columnas por bloque; con más de
   6 casos, flechas deslizan al siguiente bloque completo (js/caso-tiles-carousel.js) ---- */
.middle-note { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-on-paper-faint); text-align: center; margin: 0 0 20px; }
.caso-tiles-wrap { display: grid; grid-template-columns: 44px 1fr 44px; gap: 16px; align-items: center; margin-bottom: 40px; }
.caso-tiles-viewport { overflow: hidden; grid-column: 2; }
.caso-tiles { display: grid; grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; transition: transform 420ms var(--ease); }
.tiles-arrow { width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--paper-700); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: background 150ms var(--ease); }
.tiles-arrow:hover { background: var(--paper-800); }
.tiles-arrow.prev { grid-column: 1; }
.tiles-arrow.next { grid-column: 3; }
.tiles-arrow[hidden] { display: none; visibility: hidden; }

@media (max-width: 900px) {
  .caso-tiles { grid-auto-columns: calc((100% - 20px) / 2); }
}
/* En mobile, en vez de apilar los "otros casos" en una columna larguísima
   (una tarjeta casi cuadrada debajo de la otra), pasan a ser una tira
   horizontal deslizable con scroll-snap nativo — mismo criterio que
   .mobile-card-slider en el resto de la home. Reemplaza el paginado por
   flechas (pensado para desktop), que acá queda oculto. */
@media (max-width: 700px) {
  /* minmax(0, 1fr) y no un 1fr a secas: un 1fr solo tiene mínimo "auto",
     así que el track crece para no achicar el contenido (los .caso-tile de
     adentro tienen flex-shrink:0) en vez de recortarse al ancho real del
     celular — el clásico "grid blowout". */
  .caso-tiles-wrap { grid-template-columns: minmax(0, 1fr); }
  .tiles-arrow { display: none !important; }
  .caso-tiles-viewport { overflow: visible; grid-column: 1; }
  .caso-tiles {
    display: flex !important;
    transform: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 0 10px;
    scrollbar-width: none;
  }
  .caso-tiles::-webkit-scrollbar { display: none; }
  .caso-tiles > * {
    scroll-snap-align: start;
    flex: 0 0 82%;
    min-width: 0;
  }
}

/* ---- Marcas carousel nested inside the Casos section (below the intro,
   above the first spotlight) — a bordered card matching the container's
   own width, not full-bleed, since it's no longer its own top-level section ---- */
.marcas-section { border: 1px solid var(--paper-700); border-radius: var(--radius-lg); background: #FFFFFF; margin: 40px 0 48px; }
.marcas-row { padding: 36px 40px; display: grid; grid-template-columns: 230px 1fr; gap: 44px; align-items: center; }
.marcas-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-on-paper-faint); margin: 0; line-height: 1.5; }
@media (max-width: 900px) {
  .marcas-row { grid-template-columns: 1fr; gap: 16px; padding: 28px 24px; }
}

/* ---- Caso spotlight: the big, photo-forward block for the 1-2 casos an
   admin marks as destacados — real screenshots instead of a forced metric,
   alternating sides via .flip so it doesn't feel repetitive. ---- */
.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 12px 0 56px; }
.spotlight.flip .copy { order: 2; }
.spotlight.flip .art { order: 1; }
.spotlight-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--orange-600); margin-bottom: 14px; }
.spotlight-kicker::before { content: ''; width: 18px; height: 2px; background: var(--orange-500); border-radius: 2px; }
.copy-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.copy-eyebrow img { height: 20px; width: auto; object-fit: contain; }
.copy-eyebrow span { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-700); background: #FFF4E8; padding: 5px 10px; border-radius: 999px; }
.copy h3 { font-family: var(--font-display); font-size: 29px; line-height: 1.22; letter-spacing: -0.01em; font-weight: 700; margin: 0 0 16px; text-wrap: balance; }
.copy p { font-size: 16px; line-height: 1.65; color: var(--ink-on-paper-muted); margin: 0 0 24px; max-width: 36em; }
.facts { display: flex; gap: 36px; margin-bottom: 22px; flex-wrap: wrap; }
.fact-label { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-on-paper-faint); margin-bottom: 4px; }
.fact-value { font-size: 14.5px; color: var(--ink-on-paper); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }

.art { position: relative; aspect-ratio: 5 / 4.6; }
.art-main, .art-accent { position: absolute; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card-lg); background: var(--paper-800); }
.art-main { inset: 0 12% 14% 0; }
.art-main img, .art-main .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
.art-accent { width: 46%; aspect-ratio: 4 / 3; right: -4%; bottom: -6%; border: 6px solid var(--paper-900); }
.art-accent img { width: 100%; height: 100%; object-fit: cover; }
.spotlight.flip .art-main { inset: 0 0 14% 12%; }
.spotlight.flip .art-accent { right: auto; left: -4%; }
/* entrada escalonada: la foto principal aparece, la secundaria la sigue con una leve demora (js/caso-spotlight-reveal.js) */
.art-main, .art-accent { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.art-accent { transition-delay: 180ms; }
.art.is-visible .art-main, .art.is-visible .art-accent { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .art-main, .art-accent { opacity: 1; transform: none; transition: none; }
}

/* ---- Spotlight slider (home): un destacado visible a la vez, con flechas
   para pasar al siguiente — misma mecánica de paginado que .caso-tiles-wrap
   (js/spotlight-slider.js). En casos.php los destacados se siguen apilando
   uno debajo del otro, sin slider. ---- */
.spotlight-slider-wrap { display: grid; grid-template-columns: 44px 1fr 44px; gap: 16px; align-items: center; }
.spotlight-slider-viewport { overflow: hidden; grid-column: 2; }
.spotlight-slider-track { display: flex; transition: transform 420ms var(--ease); }
/* overflow: hidden propio (no sólo el del viewport) — los slides quedan
   pegados unos a otros sin gap, y el "sangrado" intencional de .art-accent
   (right/bottom negativos) se recortaría contra el slide vecino en vez del
   propio si no se limita acá. */
.spotlight-slide { flex: 0 0 100%; min-width: 0; overflow: hidden; }
@media (max-width: 560px) {
  .spotlight-slider-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .spotlight-slider-viewport { order: 1; flex: 1 1 100%; }
  .spotlight-slider-wrap .tiles-arrow.prev { order: 2; }
  .spotlight-slider-wrap .tiles-arrow.next { order: 3; }
}

@media (max-width: 900px) {
  .spotlight, .spotlight.flip { grid-template-columns: 1fr; gap: 32px; padding: 8px 0 40px; }
  .spotlight .copy, .spotlight.flip .copy { order: 2; }
  .spotlight .art, .spotlight.flip .art { order: 1; }
  .art { margin-bottom: 14%; }
  .art-main { inset: 0 20% 20% 0; }
  .spotlight.flip .art-main { inset: 0 0 20% 20%; }
}

/* ---- Caso hero/opening image: aspect-ratio instead of a fixed pixel
   height, so the crop window keeps the same shape at every screen width
   instead of squeezing a wide photo into a near-square box on mobile. ---- */
.caso-hero-frame { aspect-ratio: 12 / 5; width: 100%; border-radius: var(--radius-xl); overflow: hidden; background: var(--paper-800); }
.caso-hero-frame > img, .caso-hero-frame > .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Reels: tarjetas chicas (una por reel) que abren el embed real de
   Instagram en un modal — así un caso con varios reels no arranca cargando
   varios iframes pesados de una, y la grilla queda prolija sea cual sea el
   ancho fijo que traiga el embed de Instagram. ---- */
.reel-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.reel-tile {
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden;
  border: none; cursor: pointer; padding: 0;
  background: linear-gradient(160deg, var(--graphite-900), #3a2b1f 60%, var(--graphite-900));
  display: flex; align-items: center; justify-content: center;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.reel-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.reel-tile-play {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
}
.reel-tile-play svg { margin-left: 2px; }
.reel-tile-caption {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  color: #FFFFFF; font-size: 13px; line-height: 1.4; text-align: left;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.reel-modal-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(14,14,14,0.92);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease);
}
.reel-modal-overlay.is-open { opacity: 1; visibility: visible; }
.reel-modal-body { max-width: min(400px, 92vw); max-height: 88vh; width: 100%; overflow-y: auto; }
.reel-modal-close {
  position: fixed; top: 24px; right: 24px; width: 44px; height: 44px;
  background: rgba(255,255,255,0.12); border: none; color: #FFFFFF; cursor: pointer;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px;
  transition: background 150ms var(--ease);
}
.reel-modal-close:hover { background: rgba(255,255,255,0.24); }
body.reel-modal-open { overflow: hidden; }

/* ---- Caso gallery: captioned, clickable tiles + lightbox (js/lightbox.js) ---- */
.gallery-tile { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; border: none; padding: 0; display: block; width: 100%; height: 100%; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms var(--ease); }
.gallery-tile:hover img { transform: scale(1.05); }
.gallery-tile-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 14px; font-size: 13.5px; line-height: 1.4; color: #FFFFFF; text-align: left; background: linear-gradient(to top, rgba(14,14,14,0.78), transparent); }

.lightbox-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(14,14,14,0.92); display: flex; align-items: center; justify-content: center; padding: 32px; opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease); }
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.lightbox-figure { max-width: min(1100px, 92vw); max-height: 88vh; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.lightbox-figure img { max-width: 100%; max-height: 76vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; display: block; }
.lightbox-caption { color: #FFFFFF; font-size: 15px; text-align: center; margin: 0; max-width: 60em; }
.lightbox-close, .lightbox-prev, .lightbox-next { position: fixed; background: rgba(255,255,255,0.12); border: none; color: #FFFFFF; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 150ms var(--ease); }
.lightbox-close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 22px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 24px; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.24); }
body.lightbox-open { overflow: hidden; }
@media (max-width: 700px) {
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
}

/* ---- Caso body / Post body (rich text from the admin editor) — .post-body
   (notas del Blog) reusa exactamente el mismo tratamiento tipográfico que
   .caso-body (casos), mismo criterio que .filter-pill/.ideas-filter-pill. ---- */
.caso-body h2, .post-body h2 {
  font-family: var(--font-display); font-size: 34px; line-height: 1.15;
  letter-spacing: -0.015em; font-weight: 700; margin: 48px 0 20px;
}
.caso-body h2:first-child, .post-body h2:first-child { margin-top: 0; }
.caso-body h3, .post-body h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 32px 0 12px; }
.caso-body p, .post-body p { font-size: 17.5px; line-height: 1.7; color: var(--ink-on-paper-muted); margin: 0 0 18px; }
.caso-body ul, .caso-body ol, .post-body ul, .post-body ol { margin: 0 0 20px; padding-left: 22px; }
.caso-body li, .post-body li { font-size: 16px; line-height: 1.65; color: var(--ink-on-paper-muted); margin-bottom: 8px; }
.caso-body blockquote, .post-body blockquote {
  background: var(--paper-800); border: 1px solid var(--paper-700); border-radius: var(--radius-lg);
  padding: 28px 32px; margin: 28px 0;
  font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.45; color: var(--ink-on-paper);
}
.caso-body img, .post-body img { width: 100%; height: auto; border-radius: var(--radius-lg); margin: 24px 0; display: block; }
.caso-body strong, .post-body strong { font-weight: 600; color: var(--ink-on-paper); }

/* ---- Footer ---- */
.site-footer { background: var(--graphite-900); color: var(--tech-500); }
.site-footer .container {
  padding-top: 64px;
  padding-bottom: 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
.site-footer h4 {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tech-600);
  margin: 0 0 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.footer-links a { color: var(--warm-white-3); }
.footer-links a:hover { color: var(--orange-500); }
.footer-bottom {
  border-top: 1px solid var(--tech-700);
  padding: 24px 40px 40px;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--tech-600);
}

/* ---- Mobile nav toggle + drawer ---- */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: none; background: transparent; cursor: pointer;
  padding: 0; position: relative; flex-shrink: 0;
}
.nav-toggle span {
  position: absolute; left: 8px; right: 8px; height: 2px;
  background: var(--ink-on-paper); border-radius: 2px;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-drawer {
  position: fixed; inset: 0; z-index: 100;
  background: var(--paper-900);
  display: flex; flex-direction: column;
  padding: 24px 24px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 280ms var(--ease);
  visibility: hidden;
}
.nav-drawer.is-open { transform: translateX(0); visibility: visible; }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.nav-drawer-head img { height: 28px; width: auto; display: block; }
.nav-drawer-close {
  width: 44px; height: 44px; border: none; background: transparent; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--ink-on-paper); font-family: var(--font-body);
}
.nav-drawer nav { display: flex; flex-direction: column; gap: 4px; }
.nav-drawer .nav-link {
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  padding: 16px 4px; border-bottom: 1px solid var(--paper-700);
}
.nav-drawer .nav-link.is-active { color: var(--orange-600); }
.nav-drawer .btn-primary { margin-top: 28px; text-align: center; padding: 16px; font-size: 16px; }
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-toggle span { transition: none; }
}

@media (max-width: 900px) {
  .main-nav, .site-header .btn-primary { display: none; }
  .nav-toggle { display: block; }
  .site-footer .container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 30px !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .site-footer .container { grid-template-columns: 1fr; }
  img[style*="width: 120px"] { width: 100% !important; height: auto !important; }
}

/* ---- Mobile card slider: en vez de apilar tarjetas de a una (lo que hace
   larguísima la home en el celular), estos grupos pasan a ser una tira
   horizontal deslizable con scroll-snap nativo — sin JS, gesto táctil
   estándar. Sólo cambia el layout en mobile; en desktop sigue siendo la
   grilla normal (display:flex acá pisa el grid-template-columns:1fr del
   bloque de arriba porque son propiedades distintas, no hace falta tocarlo). ---- */
@media (max-width: 700px) {
  .mobile-card-slider {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    padding: 4px 0 10px;
    scrollbar-width: none;
  }
  .mobile-card-slider::-webkit-scrollbar { display: none; }
  .mobile-card-slider > * {
    scroll-snap-align: start;
    flex: 0 0 82%;
    min-width: 0;
  }
  /* La grilla oscura de "especialización" usaba gap:1px + fondo del
     contenedor como truco para dibujar líneas divisorias finas — acá cada
     tarjeta pasa a ser una tarjeta redondeada independiente. */
  .mobile-card-slider.dark-grid {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .mobile-card-slider.dark-grid > * {
    border-radius: var(--radius-lg) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-card-slider { scroll-behavior: auto; }
}

/* ---- Scroll reveal (js/scroll-reveal.js adds/observes .reveal on <section>
   elements below the fold; the hero/first section of each page is skipped
   so nothing above the fold pops in on load) ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Landing pages (landing.php): chrome mínimo a propósito — sin nav de
   sitio, para no distraer del tráfico pago que llega directo a una oferta.
   landing-header.php / landing-footer.php son partials propios, no header.php. ---- */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248,246,242,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-700);
}
.landing-header .container { height: 78px; display: flex; align-items: center; justify-content: space-between; }

.landing-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding: 72px 40px 76px;
}
.landing-hero-media { min-height: 380px; }

.landing-casos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.landing-plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.plan-card {
  background: #FFFFFF;
  border: 1px solid var(--paper-700);
  border-radius: var(--radius-xl);
  padding: 36px 34px;
}
.plan-card.is-highlight { border-color: var(--orange-500); box-shadow: var(--shadow-card); }

.landing-contact-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
  background: #FFFFFF;
  border: 1px solid var(--paper-700);
  border-radius: var(--radius-xl);
  padding: 48px 50px;
}

.landing-footer { background: var(--graphite-900); color: var(--tech-500); padding: 40px 0; }
.landing-footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.landing-footer-contact { display: flex; gap: 20px; font-size: 14px; }
.landing-footer-contact a { color: var(--tech-500); }
.landing-footer-contact a:hover { color: #FFFFFF; }
.landing-footer-copy { font-size: 13px; color: var(--tech-600); }

.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(37,211,102,0.4);
  transition: transform 200ms var(--ease);
}
.whatsapp-fab:hover { transform: scale(1.06); }

@media (max-width: 900px) {
  .landing-hero { grid-template-columns: 1fr; padding: 52px 24px 60px; gap: 36px; }
  .landing-hero-media { min-height: 260px; order: -1; }
  .landing-casos-grid { grid-template-columns: 1fr 1fr; }
  .landing-plans-grid { grid-template-columns: 1fr; }
  .landing-contact-card { grid-template-columns: 1fr; padding: 34px 26px; }
}

@media (max-width: 640px) {
  .landing-casos-grid { grid-template-columns: 1fr; }
  .landing-footer .container { flex-direction: column; text-align: center; }
}