/* ════════════════════════════════════════════════════
   Joqra & Company — joqra.css
   Tipografía original: Work Sans (igual al zip)
   Paleta: #111 · #fff · accent #4a2e26
════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --font: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --clr-bg: #ffffff;
  --clr-text: #111111;
  --clr-muted: #555555;
  --clr-border: #e5e5e5;
  --clr-accent: #4a2e26;
  --clr-soft: #fdf7f4;
  --nav-h: 68px;
  /* Blog card colors — originales del zip */
  --okra:    #ffffff;
  --salmon:  #f6f5f3;
  --mustard: #f6f5f3;
  --coffee:  #e5ebe6;
  --moztasa: #baece8;
  --ink:     #111;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font); font-weight: 400; line-height: 1.65; color: var(--clr-text); background: var(--clr-bg); overflow-x: hidden; }

/* ── Links: nunca azul del navegador ── */
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

/* ── Tipografía con Work Sans ── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--clr-text); }
h1 { font-size: clamp(1.85rem, 4.5vw, 3rem); padding-bottom: 15px;}
h2 { font-size: clamp(1.45rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1rem, 1.8vw, 1.35rem); }
h4 { font-size: 1rem; font-weight: 600; }
p  { font-size: 1rem; line-height: 1.7; color: var(--clr-muted); padding-bottom: 15px;}
img { display: block; max-width: 100%; }
ul  { list-style: none; padding: 0; }

/* ── Contenedor 100% ancho con padding lateral ── */
.jq-wrap        { width: 100%;  }
.jq-wrap--max   { width: 100%; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; }
.jq-container   { width: 100%; margin: 0 auto; }
.jq-hero__intro { margin-bottom:.3rem;}
.jq-hero__cta { margin-bottom:.3rem; }
/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.jq-topbar { position:sticky; top:0; z-index:200; background:#111; border-bottom:1px solid #222; }
.jq-topbar__inner {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; height:var(--nav-h); padding:0 2rem;
}
.jq-topbar__logo img { height:42px; display:block; margin:0 auto; }
.jq-nav { display:flex; gap:1.75rem; align-items:center; }
.jq-nav--right { justify-content:flex-end; }
.jq-nav a { font-size:.875rem; font-weight:500; color:#fff; text-decoration:none; transition:color .2s; }
.jq-nav a:hover { color:#ccc; }
/* Milestones pill */
.jq-nav__pill {
  border:1px solid rgba(255,255,255,.5); border-radius:999px;
  padding:.3rem 1rem; font-size:.8125rem !important; font-weight:600 !important;
  transition:background .2s, border-color .2s !important;
}
.jq-nav__pill:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.8); color:#fff !important; }

/* Hamburger */
.jq-hamburger { display:none; background:none; border:none; cursor:pointer; color:#fff; font-size:1.5rem; line-height:1; padding:8px; }

@media (max-width:900px) {
  .jq-topbar__inner { grid-template-columns:auto 1fr auto; }
  .jq-hamburger { display:block; }
  .jq-nav.jq-nav--left,
  .jq-nav.jq-nav--right {
    display:none; position:absolute; top:var(--nav-h); left:0; width:100%;
    background:#111; flex-direction:column; align-items:flex-start;
    padding:1.25rem 1.5rem; gap:1.1rem; z-index:300;
  }
  .jq-nav.jq-nav--right { top:auto; position:static; border-top:1px solid #333; padding-top:.8rem; padding-bottom:1rem; }
  .jq-topbar.is-open .jq-nav.jq-nav--left { display:flex; }
  .jq-topbar.is-open .jq-nav.jq-nav--right { display:flex; }
  .jq-topbar__logo { text-align:center; }
  .jq-nav__pill { border:none; padding:.1rem 0; font-size:.875rem !important; }
}

/* ══════════════════════════════════════
   HERO — imagen de fondo bien dimensionada
══════════════════════════════════════ */
.jq-hero {
  min-height:calc(100vh - var(--nav-h));
  background:#fff url('/images/hero.png') right center / auto 100% no-repeat;
  display:flex; align-items:center; padding:5rem 2rem;
}
@media (max-width:900px) {
  .jq-hero { background:#fdf7f8; padding:3.5rem 1.5rem; min-height:auto; }
}

/* Practice / inner-page hero — siempre blanco, 100% ancho */
.jq-practice-hero {
  background:#fff; border-bottom:1px solid var(--clr-border);
  padding:4rem 2rem 3.5rem; width:100%;
}
.jq-practice-hero h1 { margin-bottom:.85rem; }
.jq-practice-hero p  { max-width:680px; font-size:1.05rem; color:#333; margin-bottom:1.75rem; }
.jq-eyebrow { font-size:.72rem; letter-spacing:.14em; font-weight:600; color:#888; display:block; margin-bottom:.6rem; text-transform:uppercase; }

/* Chips rotator */
.jq-rotator { position:relative; margin-top:.8rem; min-height:200px; }
.jq-group { position:absolute; display:flex; flex-wrap:wrap; gap:.5rem; opacity:0; transition:opacity .6s; pointer-events:none; }
.jq-group.is-active { opacity:1; pointer-events:auto; }
.jq-chip { padding:.4rem .8rem; border-radius:999px; background:rgba(255,255,255,.8); border:1px solid rgba(0,0,0,.09); font-size:.8125rem; }
.jq-examples-label { display:block; font-size:.72rem; letter-spacing:.12em; color:#777; width:100%; margin-bottom:.3rem; }
.jq-examples { margin-top:2.5rem; height:270px; }
@media (max-width:900px) { .jq-examples { display:none; } }

/* ══════════════════════════════════════
   BOTONES
══════════════════════════════════════ */
.jq-btn { display:inline-block; padding:.8rem 1.5rem; border-radius:999px; font-family:var(--font); font-size:.9rem; font-weight:600; text-decoration:none; cursor:pointer; border:none; transition:all .2s; }
.jq-btn--dark  { background:#111; color:#fff !important; }
.jq-btn--dark:hover { background:#333; }
.jq-btn--outline { background:transparent; border:1.5px solid #111; color:#111 !important; }
.jq-btn--outline:hover { background:#111; color:#fff !important; }
.jq-btn--accent { background:var(--clr-accent); color:#fff !important; }
.jq-btn--accent:hover { background:#3a2018; }

/* ══════════════════════════════════════
   CAPACIDADES — 100% ancho
══════════════════════════════════════ */
.jq-capabilities { padding:6rem 2rem; width:100%; }
.jq-capabilities__grid { display:grid; grid-template-columns:1.1fr 2fr; gap:4rem; }
.jq-capabilities__cols { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.jq-capabilities__cols h3 { margin-bottom:.85rem; }
.jq-list li { font-size:.9375rem; line-height:1.6; padding:.5rem 0; border-bottom:1px solid rgba(0,0,0,.07); color:var(--clr-text); }
.jq-list li strong { font-weight:600; }
.jq-cap-link { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:5px; transition:color .2s; }
.jq-cap-link::after { content:'→'; font-size:.8em; opacity:.4; transition:opacity .2s, transform .2s; }
.jq-cap-link:hover { color:var(--clr-accent); }
.jq-cap-link:hover::after { opacity:1; transform:translateX(3px); }
@media (max-width:900px) {
  .jq-capabilities__grid { grid-template-columns:1fr; gap:2rem; }
  .jq-capabilities__cols { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════
   CASOS — sin borde, full width
══════════════════════════════════════ */
.jq-cases { padding:6rem 2rem; width:100%; }
.jq-section-header { text-align:center; margin:0 auto 3rem; }
.jq-section-header h2 { margin-bottom:.6rem; }
.jq-cases-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.jq-case-card {
  background:#fff; border-radius:16px; padding:2rem 1.5rem;
  text-align:center; display:flex; flex-direction:column; gap:.85rem;
  box-shadow:0 2px 16px rgba(0,0,0,.06); transition:box-shadow .25s, transform .25s;
}
.jq-case-card:hover { box-shadow:0 8px 32px rgba(0,0,0,.1); transform:translateY(-3px); }
.jq-case-card img { margin:0 auto; border-radius:10px; }
.jq-case-card h3 { font-size:.95rem; line-height:1.4; }
.jq-case-card p  { font-size:.875rem; }
.jq-case-card .jq-btn { margin-top:auto; align-self:center; font-size:.8125rem; }

/* ══════════════════════════════════════
   SECTORES — carrusel 2 cards, full width
══════════════════════════════════════ */
.jq-sectors { padding:6rem 2rem; width:100%; }
.jq-sectors__inner { display:grid; grid-template-columns:1fr 1.6fr; gap:3.5rem; align-items:start; }
.jq-sectors__tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.25rem 0 1.75rem; }
.jq-sectors__tags span { border:1px solid #ccc; padding:5px 12px; border-radius:999px; font-size:.78125rem; font-weight:500; color:#333; }
.jq-carousel { position:relative; width:100%; overflow:hidden; }
.jq-carousel__track { display:flex; gap:1rem; transition:transform .4s ease; }
.jq-sector-card { flex:0 0 calc(50% - .5rem); border:1px solid var(--clr-border); border-radius:12px; background:#fff; overflow:hidden; }
.jq-sector-card img { width:100%; height:148px; object-fit:cover; }
.jq-sector-card__body { padding:2rem; }
.jq-sector-card__name { font-size:.875rem; font-weight:600; margin-bottom:.2rem; }
.jq-sector-card__role { font-size:.72rem; font-weight:500; margin-bottom:.5rem; color:#666; }
.jq-sector-card__desc { font-size:.78125rem; line-height:1.5; color:#444; }
.jq-carousel-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background:#fff; color:#111; border:1px solid var(--clr-border);
  width:32px; height:32px; border-radius:50%;
  cursor:pointer; font-size:1rem; z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.1); line-height:1;
}
.jq-carousel-btn--prev { left:-8px; }
.jq-carousel-btn--next { right:-8px; }
.jq-carousel-btn:hover { background:#111; color:#fff; border-color:#111; }
@media (max-width:900px) {
  .jq-sectors__inner { grid-template-columns:1fr; gap:2rem; }
  .jq-sector-card { flex:0 0 80%; }
}

/* ══════════════════════════════════════
   PARA QUIÉN — full width, imagen con cover correcto
══════════════════════════════════════ */
.jq-audience { padding:6rem 2rem; background:#f9f8f7; width:100%; }
.jq-audience__header { text-align:center; margin:0 auto 2.25rem; }
.jq-audience__tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:2rem; margin-bottom:3rem; }
.jq-tab-btn { background:none; border:none; font-size:.9375rem; font-weight:500; font-family:var(--font); cursor:pointer; padding-bottom:.4rem; border-bottom:2px solid transparent; transition:border-color .2s; color:#555; }
.jq-tab-btn.active, .jq-tab-btn.is-active { border-color:#111; color:#111; }
.jq-audience__content { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.jq-audience__text h3 { margin-bottom:1rem; }
.jq-audience__text ul { margin-bottom:1.75rem; }
.jq-audience__text li { font-size:.9375rem; padding:.5rem 0; border-bottom:1px solid rgba(0,0,0,.07); color:var(--clr-text); }
/* support-visual usa background-image del script original */
.support-visual, .jq-audience__visual {
  border-radius:16px;
  height:400px;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  overflow:hidden;
}
@media (max-width:900px) {
  .jq-audience__content { grid-template-columns:1fr; gap:2rem; }
  .support-visual, .jq-audience__visual { height:220px; }
  .jq-audience__tabs { gap:1rem; }
}

/* ══════════════════════════════════════
   BLOG — grid con colores originales del zip
   full width
══════════════════════════════════════ */
.jq-blog { padding:6rem 2rem; width:100%; }
.jq-blog__header { text-align:center; max-width:640px; margin:0 auto 2.5rem; }

/* Reusar clases originales del blog.css del zip */
.teladoc-style-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:180px;
  gap:24px;
}
.card {
  border-radius:20px; padding:24px;
  position:relative; overflow:hidden;
  box-shadow:0 14px 36px rgba(0,0,0,.05);
  transition:transform .25s ease;
}
.card:hover { transform:translateY(-4px); }
.card h3 { margin:0 0 8px; font-size:1.1rem; color:var(--clr-text); }
.card p   { font-size:.875rem; line-height:1.4; }
.small { grid-column:span 1; }
.large { grid-column:2 / span 2; grid-row:span 2; display:flex; flex-direction:column; justify-content:flex-end; }
.tall  { grid-row:span 2; }
.tall-1 { grid-row:span 3; }
.okra    { background:var(--okra); border:1px solid var(--clr-border); }
.salmon  { background:var(--salmon); }
.mustard { background:var(--mustard); }
.coffee  { background:var(--coffee); color:#000; }
.coffee h3 { color:#000; }
.coffee p  { color:#000 }
.moztasa { background:var(--moztasa); }
.card.image { padding:0; }
.card.image img { width:100%; height:100%; object-fit:cover; border-radius:20px; }
.card.video-vertical { padding:0; overflow:hidden; border-radius:20px; background:#fff; display:flex; flex-direction:column; }
.video-thumb { position:relative; }
.video-thumb img { width:100%; height:auto; display:block; }
.video-thumb .play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.25rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.video-content { padding:1rem; }
.stat { font-size:1.1rem; font-weight:700; }
.tag { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; margin-bottom:.5rem; display:block; }
.card-image { overflow:hidden; flex-shrink:0; }
.card-image img { width:100%; height:200px; object-fit:cover; }
.card-content { padding:1.25rem; }
@media (max-width:1000px) { .teladoc-style-grid { grid-template-columns:repeat(2,1fr); } .large { grid-column:span 2; } }
@media (max-width:600px) { .teladoc-style-grid { grid-template-columns:1fr; grid-auto-rows:auto; } }

/* ══════════════════════════════════════
   FAQ — diseño original 2 columnas, centrado
   full width
══════════════════════════════════════ */
.jq-faq-wrap { padding:5rem 2rem; width:100%; }
.faq-section {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; max-width:1100px; margin:0 auto;
}
.faq-left h2 { font-size:1.5rem; margin-bottom:1rem; text-align:center; }
.faq-left .subtitle { font-size:1rem; max-width:100%; margin-bottom:2.5rem; text-align:center; color:var(--clr-muted); }
.faq-left img { width:100%; }
.faq-item { border-bottom:1px solid #0f3d3e; }
.faq-question {
  width:100%; background:none; border:none; padding:1.25rem 0;
  font-size:1rem; text-align:left; display:flex; justify-content:space-between;
  cursor:pointer; color:#0f3d3e; font-family:var(--font); font-weight:500;
}
.faq-question span { font-size:1.25rem; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-answer p { margin:0 0 1.25rem; color:#244f50; line-height:1.6; font-size:.9375rem; }
.faq-item.active .faq-answer { max-height:300px; }
@media (max-width:900px) {
  .faq-section { grid-template-columns:1fr; gap:2.5rem; padding:0; }
  .faq-left img { display:none; }
}

/* ══════════════════════════════════════
   CTA
══════════════════════════════════════ */
.jq-cta { padding:2rem 2rem; text-align:center; width:100%; }
.jq-cta h2 { margin-bottom:.11rem; }
.jq-cta p  { font-size:1.05rem; color:#444; margin-bottom:3rem; }
.jq-cta__actions { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.jq-footer { background:#111; color:#ccc; padding:2rem 2rem 2rem; width:100%; }
.jq-footer__inner {  margin:0 auto; display:grid; grid-template-columns:2fr repeat(4,1fr); gap:3rem; padding-bottom:2.5rem; border-bottom:1px solid #2a2a2a; }
.jq-footer__brand { font-size:1rem; font-weight:700; color:#fff; margin-bottom:.5rem; display:block; }
.jq-footer__tagline { font-size:.8125rem; color:#888; max-width:260px; margin:.5rem 0 1.25rem; line-height:1.6; }
.jq-footer__col h4 { font-size:.72rem; font-weight:700; letter-spacing:.09em; color:#fff; margin-bottom:.9rem; text-transform:uppercase; }
.jq-footer__col a { display:block; font-size:.8125rem; color:#888; text-decoration:none; margin-bottom:.45rem; transition:color .2s; }
.jq-footer__col a:hover { color:#fff; }
.jq-footer__bottom { max-width:1240px; margin:1.5rem auto 0; font-size:.78125rem; color:#555; text-align:center; }
.jq-social { display:flex; gap:.65rem; margin-top:1rem; }
.jq-social a { width:32px; height:32px; border-radius:50%; border:1px solid #333; display:inline-flex; align-items:center; justify-content:center; color:#888; transition:all .2s; }
.jq-social a:hover { background:#fff; color:#111; border-color:#fff; }
.jq-social svg { width:14px; height:14px; fill:currentColor; }
@media (max-width:900px) { .jq-footer__inner { grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:600px) { .jq-footer__inner { grid-template-columns:1fr; } }

/* ══════════════════════════════════════
   PRÁCTICA / CAPACIDAD — full width
══════════════════════════════════════ */
.jq-practice-body { padding:2rem 2rem; width:100%; }
.jq-practice-body__inner {  margin:0 auto; }
.jq-practice-body p { margin-bottom:1.1rem; color:#333; }
.jq-practice-body h2 { margin:2.5rem 0 .9rem; }
.jq-practice-body h3 { margin:1.75rem 0 .6rem; }
.jq-practice-pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.25rem; margin:1.75rem 0 2.5rem; }
.jq-pillar { background:#fafafa; border:1px solid var(--clr-border); border-radius:14px; padding:1.35rem; }
.jq-pillar h4 { margin-bottom:.4rem; font-size:.9rem; }
.jq-pillar p  { font-size:.8375rem; }

/* ══════════════════════════════════════
   EDITORIAL (sobre nosotros) — full width
══════════════════════════════════════ */
.jq-editorial { padding:2rem 2rem; width:100%; }
.jq-editorial__body { margin:0 auto; }
.jq-editorial__body p { margin-bottom:1.35rem; color:#333; }
.jq-editorial__body h2 { margin:2.5rem 0 1rem; }
.jq-editorial__body h3 { margin:2rem 0 .75rem; }
/* Firma centrada */
.jq-firma { display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:3rem; gap:.35rem; }
.jq-firma img { width:90px; height:130px; border-radius:12px; object-fit:cover; margin-bottom:.5rem; }
.jq-firma strong { font-weight:600; font-size:1rem; }
.jq-firma span { font-size:.875rem; color:var(--clr-muted); }

/* ══════════════════════════════════════
   FORMULARIOS — Tally embeds, full width
══════════════════════════════════════ */
.jq-form-page { padding:2rem 2rem; width:100%; }
.jq-form-page__inner {  margin:0 auto; }
.jq-form-page h2 { margin-bottom:1rem; }
.jq-form-page p  { margin-bottom:1.5rem; color:#333; }
.jq-form-page iframe { width:100%; min-height:480px; border:none; margin-top:1rem; }

/* ══════════════════════════════════════
   LEGAL — sin hero, párrafos con espacio
══════════════════════════════════════ */
.jq-legal { padding:2rem 2rem 5rem; width:100%; }
.jq-legal__inner {  margin:0 auto; }
.jq-legal__inner h1 { font-size:clamp(1.5rem,3vw,2rem); margin-bottom:2.5rem; }
.jq-legal__inner h2 { font-size:1rem; font-weight:700; margin:2.5rem 0 .75rem; letter-spacing:.01em; }
.jq-legal__inner p  { font-size:.9375rem; color:#333; margin-bottom:1.4rem; line-height:1.75; }
.jq-legal__inner ul { padding-left:1.25rem; list-style:disc; margin-bottom:1.4rem; }
.jq-legal__inner li { font-size:.9375rem; color:#333; margin-bottom:.6rem; line-height:1.7; }

/* ══════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════ */
.jq-breadcrumb { font-size:.78125rem; color:var(--clr-muted); padding:.85rem 2rem; border-bottom:1px solid var(--clr-border); }
.jq-breadcrumb a { color:var(--clr-muted); }
.jq-breadcrumb a:hover { text-decoration:underline; }
.jq-breadcrumb span { margin:0 .3rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }