/* ==========================================================================
   OPIO Strategic Hospitality — Sistema de diseño
   Basado en el Briefing v1.0 (secciones 3.2 / 3.3 / 3.4).
   Lujo sobrio y operativo · cálido, preciso, caro.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Color de marca */
  --opio-gold:        #9A8660;
  --opio-gold-warm:   #B8935A;
  --opio-gold-deep:   #7A6742; /* obligatorio para texto/enlace dorado sobre claro */

  /* Tinta y fondos oscuros */
  --opio-ink:         #1A1A1A;
  --opio-graphite:    #4A4A4A;
  --opio-espresso:    #2B2723;

  /* Neutros claros */
  --opio-bone:        #FAFAF8;
  --opio-sand:        #F5F3EF;
  --opio-linen:       #EDE7DE;
  --opio-line:        #E4DFD7;

  /* UI funcional (nunca decorativo) */
  --opio-success:     #4B7B5A;
  --opio-alert:       #B4562F;

  /* Tipografía */
  --font-display: "Anton", "Archivo", system-ui, sans-serif;
  --font-inst:    "Jost", "Archivo", system-ui, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   Georgia, "Times New Roman", serif;

  /* Escala tipográfica fluida (desktop → mobile, sección 3.3) */
  --fs-display: clamp(2.75rem, 1.4rem + 6vw, 5.5rem);   /* 44 → 88 */
  --fs-h1:      clamp(2.25rem, 1.4rem + 3.8vw, 4rem);   /* 36 → 64 */
  --fs-h2:      clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);/* 28 → 44 */
  --fs-h3:      clamp(1.375rem, 1.15rem + 1vw, 1.75rem);/* 22 → 28 */
  --fs-body:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);/* 16 → 18 */
  --fs-small:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);

  /* Espaciado base-8 (sección 3.4) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px;

  --maxw: 1280px;
  --reading: 720px;
  --radius: 3px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Reset ligero ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--opio-ink);
  background: var(--opio-bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--opio-gold-deep); text-decoration: none; }
a:hover { color: var(--opio-gold-warm); }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; max-width: 68ch; }

/* Foco accesible (sección 10.3) */
:focus-visible {
  outline: 2px solid var(--opio-gold-deep);
  outline-offset: 3px;
}

/* ---- Tipografía --------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.h1 { font-family: var(--font-inst); font-size: var(--fs-h1); line-height: 1.05; font-weight: 300; letter-spacing: -0.005em; }
.h2 { font-family: var(--font-inst); font-size: var(--fs-h2); line-height: 1.15; font-weight: 300; text-transform: uppercase; letter-spacing: 0.06em; }
.h3 { font-family: var(--font-inst); font-size: var(--fs-h3); line-height: 1.2;  font-weight: 400; }
.serif { font-family: var(--font-serif); font-style: italic; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-inst);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--opio-gold-deep);
  margin: 0 0 var(--s-2);
}
.reg { font-size: 0.6em; vertical-align: super; font-weight: 400; } /* símbolo ® */
.lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem); color: var(--opio-graphite); line-height: 1.55; }
.muted { color: var(--opio-graphite); }
.legal { font-size: var(--fs-small); color: var(--opio-graphite); }

/* ---- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }
.section { padding-block: clamp(72px, 10vw, 128px); }
.section--sand { background: var(--opio-sand); }
.section--linen { background: var(--opio-linen); }
.section--dark { background: var(--opio-espresso); color: var(--opio-bone); }
.section--dark .eyebrow { color: var(--opio-gold-warm); }
.section--dark p { color: #D9D2C7; }
.section-head { max-width: var(--reading); margin-bottom: var(--s-8); }
.rule { height: 1px; background: var(--opio-line); border: 0; margin: 0; }

/* Motivo III como separador (sección 3.4) */
.iii { display: inline-flex; gap: 5px; align-items: center; }
.iii span { width: 3px; height: 22px; background: var(--opio-gold); display: block; }

/* ---- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-inst); font-weight: 500;
  font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 15px 28px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--primary { background: var(--opio-gold); color: #fff; }
.btn--primary:hover { background: var(--opio-gold-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--opio-ink); border-color: var(--opio-line); }
.btn--ghost:hover { border-color: var(--opio-gold); color: var(--opio-gold-deep); }
.section--dark .btn--ghost { color: var(--opio-bone); border-color: rgba(255,255,255,.28); }
.section--dark .btn--ghost:hover { border-color: var(--opio-gold-warm); color: var(--opio-gold-warm); }
.btn--lg { padding: 18px 36px; font-size: 1rem; }
.link-arrow { font-family: var(--font-inst); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: .875rem; }
.link-arrow::after { content: " →"; }

/* ---- Header ------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  height: 72px; display: flex; align-items: center;
  background: rgba(250,250,248,.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--opio-line);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.brand img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.nav a { font-family: var(--font-inst); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: .8125rem; color: var(--opio-ink); }
.nav a:hover { color: var(--opio-gold-deep); }
.nav__actions { display: flex; align-items: center; gap: var(--s-3); }
.nav__client { font-size: .8125rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--opio-ink); margin: 5px 0; transition: .2s var(--ease); }

@media (max-width: 900px) {
  .nav__links { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: flex-start;
    background: var(--opio-bone); border-bottom: 1px solid var(--opio-line);
    padding: var(--s-3) clamp(20px,5vw,48px) var(--s-4); gap: var(--s-2);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .2s var(--ease); }
  .nav__links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-toggle { display: block; }
  .nav__client { display: none; }
}

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; background: var(--opio-espresso); color: var(--opio-bone); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media::after { content:""; position:absolute; inset:0;
  background: linear-gradient(105deg, rgba(43,39,35,.92) 0%, rgba(43,39,35,.72) 45%, rgba(43,39,35,.35) 100%); }
.hero__bg { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero__inner { position: relative; z-index: 1; padding-block: clamp(96px, 15vw, 168px); max-width: 760px; }
.hero .eyebrow { color: var(--opio-gold-warm); }
.hero h1 { font-family: var(--font-inst); font-weight: 300; font-size: var(--fs-h1); line-height: 1.04; color: #fff; margin-bottom: var(--s-3); }
.hero h1 strong { font-weight: 500; }
.hero__sub { color: #D9D2C7; max-width: 58ch; margin-bottom: var(--s-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; color: #C9C0B2; }
.hero__proof b { color: var(--opio-gold-warm); font-weight: 500; }
.hero__proof .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--opio-gold); }

/* ---- Problema (3 columnas) --------------------------------------------- */
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.problem p { font-size: 1.125rem; color: var(--opio-ink); }
.problem .num { font-family: var(--font-display); color: var(--opio-gold); font-size: 1.75rem; display: block; margin-bottom: var(--s-2); }
.problem-close { font-family: var(--font-inst); font-weight: 300; font-size: var(--fs-h3); margin-top: var(--s-8); max-width: 40ch; }
@media (max-width: 760px) { .cols-3 { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ---- Modelo (A/B/C) ----------------------------------------------------- */
.model { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.model__step { border-top: 2px solid var(--opio-gold); padding-top: var(--s-3); }
.model__letter { font-family: var(--font-display); font-size: clamp(2.5rem,5vw,3.5rem); color: var(--opio-gold); line-height: 1; }
.model__q { font-family: var(--font-inst); font-size: var(--fs-h3); font-weight: 400; margin: var(--s-1) 0 4px; }
.model__t { color: var(--opio-graphite); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 760px) { .model { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ---- Pilares (grid 4x2) ------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--opio-line); border: 1px solid var(--opio-line); }
.pillar {
  background: var(--opio-bone); padding: var(--s-4) var(--s-3) var(--s-4);
  min-height: 230px; position: relative; transition: background .25s var(--ease), color .25s var(--ease);
  display: flex; flex-direction: column; gap: var(--s-1); cursor: pointer;
}
.pillar__icon { width: 34px; height: 34px; color: var(--opio-gold); }
.pillar__num { position: absolute; top: var(--s-3); right: var(--s-3); font-family: var(--font-display); color: var(--opio-line); font-size: 1.5rem; transition: color .25s var(--ease); }
.pillar h3 { font-size: 1.1875rem; margin-top: var(--s-1); }
.pillar__line { color: var(--opio-graphite); font-size: var(--fs-small); }
.pillar__more { list-style: none; margin: var(--s-1) 0 0; padding: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s var(--ease), opacity .25s var(--ease); }
.pillar__more li { font-size: .8125rem; padding-left: 14px; position: relative; margin-bottom: 4px; }
.pillar__more li::before { content:""; position:absolute; left:0; top:9px; width:5px; height:5px; background: var(--opio-gold-warm); }
.pillar:hover, .pillar:focus-within { background: var(--opio-espresso); color: var(--opio-bone); }
.pillar:hover .pillar__line, .pillar:focus-within .pillar__line { color: #C9C0B2; }
.pillar:hover .pillar__num, .pillar:focus-within .pillar__num { color: var(--opio-gold-warm); }
.pillar:hover .pillar__more, .pillar:focus-within .pillar__more { max-height: 160px; opacity: 1; }
.pillar:hover .pillar__icon, .pillar:focus-within .pillar__icon { color: var(--opio-gold-warm); }
@media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } .pillar { min-height: 0; } }

/* ---- Resultados (dark, contadores) ------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.stat__num { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.75rem); color: var(--opio-gold-warm); line-height: 1; }
.stat__label { color: #C9C0B2; font-size: var(--fs-small); margin-top: var(--s-1); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } }

/* ---- Tecnología (3 cards) ---------------------------------------------- */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-bottom: var(--s-6); }
.tech-card { border: 1px solid var(--opio-line); background: var(--opio-bone); padding: var(--s-4); }
.tech-card h3 { color: var(--opio-gold-deep); margin-bottom: var(--s-1); }
.panel-shot { border: 1px solid var(--opio-line); background: var(--opio-sand); }
@media (max-width: 860px) { .tech-grid { grid-template-columns: 1fr; } }

/* ---- Casos (carrusel) --------------------------------------------------- */
.cases { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 400px); gap: var(--s-3);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-2); scrollbar-width: thin; }
.case { scroll-snap-align: start; background: var(--opio-espresso); color: var(--opio-bone); border-radius: var(--radius); overflow: hidden; }
.case__media { aspect-ratio: 4/3; background: #221E1B; display: grid; place-items: center; }
.case__body { padding: var(--s-3); }
.case__metric { font-family: var(--font-display); color: var(--opio-gold-warm); font-size: 2rem; }
.case__brand { font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; color: #C9C0B2; }

/* ---- Ecosistema --------------------------------------------------------- */
.eco { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.eco__item { border-top: 1px solid var(--opio-line); padding-top: var(--s-3); }
.eco__item h3 { margin-bottom: 6px; }
@media (max-width: 760px) { .eco { grid-template-columns: 1fr; } }

/* ---- Sí / No ------------------------------------------------------------ */
.sino { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--opio-line); }
.sino__col { padding: var(--s-6) var(--s-4); }
.sino__col--no { background: var(--opio-sand); }
.sino__col + .sino__col { border-left: 1px solid var(--opio-line); }
.sino h3 { margin-bottom: var(--s-3); }
.sino ul { list-style: none; margin: 0; padding: 0; }
.sino li { padding-left: 26px; position: relative; margin-bottom: var(--s-2); color: var(--opio-graphite); }
.sino li::before { position: absolute; left: 0; top: 0; font-family: var(--font-inst); }
.sino__col--yes li::before { content: "＋"; color: var(--opio-success); }
.sino__col--no li::before { content: "－"; color: var(--opio-alert); }
@media (max-width: 700px) { .sino { grid-template-columns: 1fr; } .sino__col + .sino__col { border-left: 0; border-top: 1px solid var(--opio-line); } }

/* ---- CTA final + formulario -------------------------------------------- */
.cta { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-8); align-items: center; }
.form { background: var(--opio-bone); border: 1px solid var(--opio-line); padding: var(--s-4); border-radius: var(--radius); }
.field { margin-bottom: var(--s-3); }
.field label { display: block; font-family: var(--font-inst); font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--opio-graphite); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 13px 14px; font-family: var(--font-body); font-size: 1rem;
  border: 1px solid var(--opio-line); border-radius: var(--radius); background: #fff; color: var(--opio-ink);
}
.field input:focus, .field select:focus { border-color: var(--opio-gold); outline: none; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); color: var(--opio-graphite); }
.consent input { margin-top: 4px; }
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---- Footer ------------------------------------------------------------- */
.footer { background: var(--opio-espresso); color: #C9C0B2; padding-block: var(--s-12) var(--s-6); }
.footer a { color: #C9C0B2; }
.footer a:hover { color: var(--opio-gold-warm); }
.footer__brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); padding-bottom: var(--s-6); border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: var(--s-6); }
.footer__brand h4 { font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .12em; color: var(--opio-bone); font-size: .875rem; margin-bottom: 6px; }
.footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-4); }
.footer__cols h5 { font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; color: var(--opio-gold-warm); margin: 0 0 var(--s-2); }
.footer__cols ul { list-style: none; margin: 0; padding: 0; }
.footer__cols li { margin-bottom: 8px; font-size: .9375rem; }
.footer__legal { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-small); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); justify-content: space-between; }
.footer__logo img { height: 28px; margin-bottom: var(--s-2); }
@media (max-width: 860px) { .footer__brands, .footer__cols { grid-template-columns: 1fr; } }

/* ---- Placeholder honesto de foto real (sección 7: cero stock/IA) -------- */
.ph {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, #2f2a25 0 2px, transparent 2px 12px), var(--opio-espresso);
  color: #9a9086; font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem;
  padding: var(--s-4); min-height: 100%;
}
.ph--light { background: repeating-linear-gradient(135deg, #efeae2 0 2px, transparent 2px 12px), var(--opio-sand); color: #a99f8f; }
.ph--photo { padding: 0; overflow: hidden; background: #221E1B; }
.ph--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Animación de entrada (sección 3.7: fade + rise 16px) -------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- WhatsApp flotante (discreto, sin pop-up) -------------------------- */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 52px; height: 52px; border-radius: 50%;
  background: var(--opio-espresso); color: #fff; display: none; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
@media (max-width: 900px) { .wa { display: grid; } }

/* ==========================================================================
   Calculadora de escandallo
   ========================================================================== */
.esc-tool { border: 1px solid var(--opio-line); background: var(--opio-bone); border-radius: var(--radius); overflow: hidden; }
.esc-head, .esc-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr 1.1fr 0.7fr 1fr 32px;
  gap: 10px; align-items: center;
}
.esc-head { padding: 14px var(--s-3); background: var(--opio-espresso); color: var(--opio-bone);
  font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.esc-rows { padding: var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: 10px; }
.esc-row { padding: 6px 0; border-bottom: 1px solid var(--opio-line); }
.esc-row:last-child { border-bottom: 0; }
.esc-i { font-family: var(--font-body); font-size: .95rem; padding: 9px 10px; border: 1px solid var(--opio-line);
  border-radius: var(--radius); background: #fff; color: var(--opio-ink); width: 100%; }
.esc-i:focus { border-color: var(--opio-gold); outline: none; }
.esc-num { text-align: right; font-variant-numeric: tabular-nums; }
.esc-pair { display: flex; align-items: center; gap: 6px; }
.esc-pair .esc-num { flex: 1; min-width: 0; }
.esc-u { color: var(--opio-graphite); font-size: .85rem; }
.esc-uc, .esc-uu { width: 62px; flex: 0 0 auto; padding: 9px 6px; }
.esc-cost { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; color: var(--opio-gold-deep); }
.esc-cost.warn { color: var(--opio-alert); font-size: .8rem; }
.esc-del { background: none; border: 0; color: var(--opio-graphite); font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: var(--radius); }
.esc-del:hover { color: var(--opio-alert); }
.esc-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3); border-top: 1px solid var(--opio-line); }
.esc-actions .btn { font-size: .82rem; padding: 11px 18px; }

.esc-params { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
.esc-params label { display: block; font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; color: var(--opio-graphite); margin-bottom: 6px; }
.esc-params input, .esc-params select { width: 100%; padding: 10px 12px; border: 1px solid var(--opio-line);
  border-radius: var(--radius); background: #fff; font-size: .95rem; }
.esc-modes { display: flex; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }
.esc-modes label { display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--opio-graphite); text-transform: none; letter-spacing: 0; }

.esc-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--opio-line);
  border: 1px solid var(--opio-line); margin-top: var(--s-4); }
.esc-results > div { background: var(--opio-espresso); color: var(--opio-bone); padding: var(--s-3); }
.esc-results .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #C9C0B2; margin-bottom: 6px; }
.esc-results .v { font-family: var(--font-display); font-size: 1.9rem; color: var(--opio-gold-warm); line-height: 1; font-variant-numeric: tabular-nums; }
.esc-badge { display: inline-block; margin-top: 8px; font-family: var(--font-inst); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; padding: 3px 8px; border-radius: 2px; }
.esc-badge.ok { background: rgba(75,123,90,.25); color: #9fd3ac; }
.esc-badge.mid { background: rgba(184,147,90,.25); color: var(--opio-gold-warm); }
.esc-badge.hi { background: rgba(180,86,47,.25); color: #e29a7c; }

@media (max-width: 900px) {
  .esc-head { display: none; }
  .esc-row { grid-template-columns: 1fr 1fr; gap: 8px; padding: var(--s-2) 0; }
  .esc-row .esc-name { grid-column: 1 / -1; }
  .esc-cost { grid-column: 1 / 2; text-align: left; }
  .esc-del { grid-column: 2 / 3; justify-self: end; }
  .esc-params, .esc-results { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Página larga / pilar (índice lateral sticky, FAQ, pilares en profundidad)
   ========================================================================== */
.doc-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-8); align-items: start; }
.doc-index { position: sticky; top: 96px; font-size: .9rem; }
.doc-index h4 { font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--opio-graphite); margin: 0 0 var(--s-2); }
.doc-index ol { list-style: none; margin: 0; padding: 0; counter-reset: idx; }
.doc-index li { counter-increment: idx; margin-bottom: 10px; }
.doc-index a { display: flex; gap: 8px; color: var(--opio-graphite); border-left: 2px solid var(--opio-line); padding-left: 12px; }
.doc-index a::before { content: counter(idx, decimal-leading-zero); color: var(--opio-gold); font-family: var(--font-inst); }
.doc-index a:hover { color: var(--opio-ink); border-left-color: var(--opio-gold); }
.doc-body > section { padding-block: var(--s-6); border-bottom: 1px solid var(--opio-line); scroll-margin-top: 88px; }
.doc-body > section:first-child { padding-top: 0; }
.doc-body h2 { margin-bottom: var(--s-3); }
.doc-body h3 { margin: var(--s-4) 0 var(--s-1); }

.answer-box { background: var(--opio-sand); border-left: 3px solid var(--opio-gold); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-4); border-radius: 0 var(--radius) var(--radius) 0; }
.answer-box p { margin: 0; font-size: 1.0625rem; }

.pillar-deep { padding: var(--s-3) 0; border-top: 1px solid var(--opio-line); display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); }
.pillar-deep__n { font-family: var(--font-display); color: var(--opio-gold); font-size: 1.5rem; }
.pillar-deep h3 { margin: 0 0 6px; }
.pillar-deep .meta { font-size: .85rem; color: var(--opio-graphite); }
.pillar-deep .meta b { color: var(--opio-gold-deep); font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--opio-line); border: 1px solid var(--opio-line); }
.timeline > div { background: var(--opio-bone); padding: var(--s-3); }
.timeline .wk { font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; color: var(--opio-gold-deep); }

.faq details { border-bottom: 1px solid var(--opio-line); padding: var(--s-2) 0; }
.faq summary { cursor: pointer; font-family: var(--font-inst); font-size: 1.05rem; padding: 6px 0; list-style: none; }
.faq summary::marker, .faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--opio-gold); margin-right: 10px; font-weight: 500; }
.faq details[open] summary::before { content: "–"; }

@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; gap: var(--s-4); }
  .doc-index { position: static; border-bottom: 1px solid var(--opio-line); padding-bottom: var(--s-3); }
  .timeline { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Casos de éxito (rejilla filtrable + ficha) · marca DEMO mientras faltan datos
   ========================================================================== */
.demo-banner { background: var(--opio-linen); border: 1px dashed var(--opio-gold); color: var(--opio-gold-deep);
  font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem;
  padding: 10px var(--s-3); border-radius: var(--radius); margin-bottom: var(--s-4); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-6); }
.chip { font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem;
  padding: 8px 16px; border: 1px solid var(--opio-line); border-radius: 999px; background: transparent;
  color: var(--opio-graphite); cursor: pointer; transition: .2s var(--ease); }
.chip:hover { border-color: var(--opio-gold); color: var(--opio-gold-deep); }
.chip.active { background: var(--opio-espresso); color: var(--opio-bone); border-color: var(--opio-espresso); }

.caso-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.caso-card { border: 1px solid var(--opio-line); border-radius: var(--radius); overflow: hidden; background: var(--opio-bone);
  display: flex; flex-direction: column; transition: transform .2s var(--ease); }
.caso-card:hover { transform: translateY(-3px); }
.caso-card__media { aspect-ratio: 4/3; }
.caso-card__body { padding: var(--s-3); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.caso-card__city { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--opio-graphite); }
.caso-card__metric { font-family: var(--font-display); color: var(--opio-gold-deep); font-size: 1.6rem; line-height: 1; }
.caso-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tag { font-size: .68rem; font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; border: 1px solid var(--opio-line); border-radius: 3px; color: var(--opio-graphite); }
@media (max-width: 900px) { .caso-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .caso-grid { grid-template-columns: 1fr; } }

/* Ficha de caso */
.case-metric-big { font-family: var(--font-display); color: var(--opio-gold-warm); font-size: clamp(2.5rem,6vw,4rem); line-height: 1; }
.case-quote { border-left: 3px solid var(--opio-gold); padding: var(--s-2) var(--s-4); font-family: var(--font-serif);
  font-style: italic; font-size: 1.25rem; color: var(--opio-graphite); margin: var(--s-4) 0; }
.case-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.case-gallery .ph { aspect-ratio: 1; }
@media (max-width: 700px) { .case-gallery { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Ficha de caso modular — una sección inmersiva por servicio (estilo OPIO)
   Inspiración de estructura: portfolios de agencia. Estética: lujo sobrio.
   ========================================================================== */
.cs { padding-block: clamp(64px, 9vw, 112px); }
.cs--dark { background: var(--opio-espresso); color: var(--opio-bone); }
.cs--sand { background: var(--opio-sand); }
.cs--dark p { color: #D9D2C7; }
.cs__head { max-width: 640px; margin: 0 auto var(--s-8); text-align: center; }
.cs__eyebrow { font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; color: var(--opio-gold-warm); display: block; margin-bottom: var(--s-2); }
.cs__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2rem,5vw,3.25rem); line-height: .98; letter-spacing: -.01em; }
.cs--sand .cs__eyebrow { color: var(--opio-gold-deep); }
.cs__lead { margin-top: var(--s-3); }

/* Naming: rejilla de candidatos, el elegido resaltado */
.naming-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); max-width: 1000px; margin: 0 auto; }
.name-chip { border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: var(--s-4) var(--s-2); text-align: center;
  font-family: var(--font-inst); letter-spacing: .06em; color: #7d746a; filter: blur(2px); user-select: none; }
.cs--sand .name-chip { border-color: var(--opio-line); color: #b8ae9d; }
.name-chip--pick { filter: none; background: var(--opio-gold); color: #1c1913; border-color: var(--opio-gold); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 720px){ .naming-grid { grid-template-columns: repeat(2,1fr); } }

/* Galería (identidad / interiorismo): 3 imágenes, la central mayor */
.gallery-3 { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--s-2); align-items: center; max-width: 1100px; margin: 0 auto; }
.gallery-3 .ph { aspect-ratio: 3/4; border-radius: var(--radius); }
.gallery-3 .ph--wide { aspect-ratio: 4/5; }
@media (max-width: 720px){ .gallery-3 { grid-template-columns: 1fr 1fr; } .gallery-3 .ph:nth-child(2){ grid-column: 1/-1; aspect-ratio:16/10; } }

/* Fotografía: mosaico */
.photos-masonry { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: var(--s-2); max-width: 1100px; margin: 0 auto; }
.photos-masonry .ph { border-radius: var(--radius); }
.photos-masonry .ph:nth-child(1){ grid-row: span 2; }
.photos-masonry .ph:nth-child(4){ grid-row: span 2; }
@media (max-width: 720px){ .photos-masonry { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; } }

/* Audiovisual: reels con play */
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); max-width: 1000px; margin: 0 auto; }
.reel { aspect-ratio: 9/16; border-radius: var(--radius); position: relative; }
.reel--live { overflow: hidden; background: #000; margin: 0; }
.reel-vid { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.reel .play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.9);
  display: grid; place-items: center; color: var(--opio-espresso); }
@media (max-width: 720px){ .reels { grid-template-columns: 1fr 1fr; } }

/* Web: mockup de dispositivos */
.devices { display: flex; justify-content: center; align-items: flex-end; gap: var(--s-3); max-width: 1000px; margin: 0 auto; }
.device-laptop { width: min(62%, 620px); }
.device-laptop .screen { aspect-ratio: 16/10; border: 8px solid #111; border-radius: 12px; overflow: hidden; }
.device-laptop .base { height: 12px; background: #111; border-radius: 0 0 8px 8px; margin: 0 -6%; }
.device-phone { width: min(20%, 150px); }
.device-phone .screen { aspect-ratio: 9/19; border: 7px solid #111; border-radius: 22px; overflow: hidden; }
.device .ph { width: 100%; height: 100%; }
@media (max-width: 720px){ .device-phone { display: none; } .device-laptop { width: 100%; } }

/* Métricas (gastromarketing / tecnología) */
.cs-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-4); max-width: 820px; margin: 0 auto; text-align: center; }
.cs-stats .n { font-family: var(--font-display); color: var(--opio-gold-warm); font-size: clamp(2rem,5vw,3rem); line-height: 1; }
.cs-stats .l { color: #C9C0B2; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.cs--sand .cs-stats .l { color: var(--opio-graphite); }

/* Barra fija inferior (Casos · Agendar) */
.case-bar { position: sticky; bottom: 0; z-index: 80; display: flex; justify-content: center; gap: var(--s-2);
  padding: var(--s-2); background: linear-gradient(to top, var(--opio-bone) 60%, transparent); }
.case-bar .btn { box-shadow: 0 4px 18px rgba(0,0,0,.12); }

/* Hero inmersivo de caso (vídeo/foto a sangre + nombre superpuesto, tipo portfolio) */
.case-hero { position: relative; min-height: 60vh; display: grid; align-items: end; background: var(--opio-espresso); overflow: hidden; }
.case-hero > .ph { position: absolute; inset: 0; }
.case-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,17,15,.92) 0%, rgba(20,17,15,.45) 60%, rgba(20,17,15,.25) 100%); }
.case-hero__in { position: relative; z-index: 1; padding-block: clamp(48px, 8vw, 96px); width: 100%; }
.case-hero__slogan { color: var(--opio-gold-warm); font-family: var(--font-inst); letter-spacing: .14em; text-transform: uppercase; font-size: clamp(.75rem, 2vw, .95rem); margin-bottom: var(--s-2); }
.case-hero__name { font-family: var(--font-display); text-transform: uppercase; color: #fff; font-size: clamp(3rem, 10vw, 7rem); line-height: .88; letter-spacing: -.01em; }
.case-hero__meta { color: #C9C0B2; margin-top: var(--s-2); }
.slogan-block { text-align: center; }
.slogan-block .big { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2rem, 7vw, 4.5rem); line-height: .95; color: var(--opio-gold-deep); margin: var(--s-2) 0; }

/* ==========================================================================
   Planes (sin precios) y Tecnología
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); align-items: start; }
.plan { border: 1px solid var(--opio-line); border-radius: var(--radius); padding: var(--s-4); background: var(--opio-bone); position: relative; display: flex; flex-direction: column; gap: var(--s-2); }
.plan--featured { border-color: var(--opio-gold); background: var(--opio-sand); }
.plan__badge { position: absolute; top: -11px; left: var(--s-4); background: var(--opio-gold); color: #1c1913; font-family: var(--font-inst); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; padding: 4px 10px; border-radius: 2px; }
.plan__badge--dark { background: var(--opio-espresso); color: var(--opio-gold-warm); }
.plan__name { font-family: var(--font-inst); font-size: 1.5rem; }
.plan__for { color: var(--opio-graphite); min-height: 3.2em; }
.plan__ref { border-top: 1px solid var(--opio-line); border-bottom: 1px solid var(--opio-line); padding: var(--s-2) 0; margin: var(--s-1) 0; }
.plan__ref b { font-family: var(--font-inst); color: var(--opio-gold-deep); }
.plan__list { list-style: none; margin: 0; padding: 0; }
.plan__list li { padding-left: 22px; position: relative; margin-bottom: 8px; font-size: .95rem; }
.plan__list li::before { content: "＋"; position: absolute; left: 0; color: var(--opio-gold); }
.plan .btn { margin-top: auto; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

.tech-hero-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.tech-big { border: 1px solid var(--opio-line); border-radius: var(--radius); padding: var(--s-4); background: var(--opio-bone); }
.tech-big h3 { color: var(--opio-gold-deep); font-family: var(--font-inst); font-size: 1.375rem; margin-bottom: var(--s-1); }
@media (max-width: 860px) { .tech-hero-cards { grid-template-columns: 1fr; } }