/*
 * SOTIE Conecta · sitio web de escritorio (1000px o más).
 * El celular conserva el diseño aprobado: todo lo de aquí vive dentro de
 * media queries y usa clases "dk-" que solo se generan en pantallas grandes.
 */

.desk-nav, .desk-foot { display: none; }

/* Tablet: columna más ancha, sin franjas blancas */
@media (min-width: 700px) and (max-width: 999px) {
  html, body { background: var(--bg); }
  body { padding: 0; }
  #web-app { width: 100%; border: 0; border-radius: 0; box-shadow: none; min-height: 100dvh; }
  .top, main, .page-footer { max-width: 760px; margin-left: auto; margin-right: auto; }
  .page-footer { margin: 0 auto; }
  .categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid, .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .content-grid, .two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
  .bottom-nav { max-width: 760px; margin: 0 auto; }
}

@media (min-width: 1000px) {
  :root { --dk: 1240px; --bg2: #08242a; --line2: #1b383f; }
  html, body { background: var(--bg); }
  body { padding: 0; }
  #web-app {
    width: 100%; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
    background: radial-gradient(ellipse at 80% 0%, #0d3138 0, transparent 50%), var(--bg);
  }
  .dk-wrap { width: min(var(--dk), calc(100% - 64px)); margin: 0 auto; }

  /* Barra superior */
  .top { position: sticky; top: 0; z-index: 30; padding: 0; background: #051b20ee; backdrop-filter: blur(12px); border-bottom: 1px solid var(--line2); }
  .top-inner { width: min(var(--dk), calc(100% - 64px)); margin: 0 auto; min-height: 76px; gap: 36px; justify-content: flex-start; }
  .header-actions { display: none; }
  .bottom-nav { display: none; }
  .desk-nav { display: flex; flex: 1; align-items: center; gap: 28px; }
  .desk-nav .links { display: flex; gap: 26px; font-size: .92rem; color: #d3dfe1; }
  .desk-nav .links a:hover, .desk-nav .links a.current { color: var(--gold); }
  .desk-nav .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
  .dk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; font-weight: 650; font-size: .9rem; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); white-space: nowrap; }
  .dk-btn .icon { width: 18px; height: 18px; }
  .dk-btn.gold { background: linear-gradient(100deg, #f0cf85, #c99b3f); color: #1b1406; border: 0; }
  .dk-btn.ghost { background: transparent; }
  .dk-btn.wide { width: 100%; }

  /* Contenido */
  main { width: 100%; max-width: calc(var(--dk) + 64px); margin: 0 auto; padding: 36px 32px 64px; min-height: 0; }
  main.dk-full { max-width: none; padding: 0; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.3rem; }

  /* Pie de página */
  .page-footer { display: none; }
  .desk-foot { display: block; border-top: 1px solid var(--line2); padding: 48px 0 28px; color: var(--muted); font-size: .9rem; }
  .desk-foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
  .desk-foot h4 { color: var(--ink); margin: 0 0 12px; font-size: .95rem; }
  .desk-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
  .desk-foot a:hover { color: var(--gold); }
  .desk-foot .legal { display: flex; justify-content: space-between; border-top: 1px solid var(--line2); padding-top: 20px; font-size: .82rem; }
  .desk-foot p { max-width: 36ch; margin-top: 14px; }

  /* Buscador grande */
  .dk-search { display: flex; align-items: center; background: #0b2a31; border: 1px solid #33555d; border-radius: 14px; padding: 6px; box-shadow: 0 18px 40px #0007; margin: 0; }
  .dk-search .q { display: flex; align-items: center; gap: 10px; flex: 1; padding: 0 14px; color: var(--muted); min-width: 0; }
  .dk-search input { all: unset; flex: 1; min-width: 0; color: var(--ink); font-size: 1rem; height: 48px; }
  .dk-search input::placeholder { color: var(--muted); }
  .dk-search .sep { width: 1px; height: 28px; background: #2f4f57; }
  .dk-search select { all: unset; color: #d3dfe1; padding: 0 14px; font-size: .95rem; width: 170px; cursor: pointer; }
  .dk-search button { min-height: 50px; padding: 0 26px; font-size: 1rem; }
  .dk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: .85rem; color: var(--muted); align-items: center; }
  .dk-chips a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: #d3dfe1; }
  .dk-chips a:hover { border-color: var(--gold); color: var(--gold); }

  /* Portada */
  .dk-hero { padding: 72px 0 56px; }
  .dk-hero .dk-wrap { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
  .dk-place { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-size: .92rem; margin-bottom: 18px; }
  .dk-place .icon { width: 18px; height: 18px; }
  .dk-hero h1 { font-size: 3.6rem; line-height: 1.04; letter-spacing: -.045em; font-weight: 800; margin: 0 0 18px; max-width: 12ch; }
  .dk-lead { font-size: 1.15rem; color: var(--muted); max-width: 44ch; margin: 0 0 30px; }
  .dk-mosaic { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 230px 200px; gap: 14px; }
  .dk-mosaic a { position: relative; border-radius: 16px; overflow: hidden; display: block; background: var(--panel); }
  .dk-mosaic a:first-child { grid-row: 1 / span 2; }
  .dk-mosaic img { width: 100%; height: 100%; object-fit: cover; }
  .dk-mosaic span { position: absolute; left: 12px; bottom: 12px; background: #051b20d9; backdrop-filter: blur(6px); border: 1px solid #ffffff1f; border-radius: 10px; padding: 8px 12px; font-size: .8rem; line-height: 1.3; }
  .dk-mosaic b { display: block; font-size: .9rem; }
  .dk-mosaic small { color: var(--muted); }

  .dk-section { padding: 48px 0; }
  .dk-band { background: var(--bg2); border-top: 1px solid #133238; border-bottom: 1px solid #133238; }
  .dk-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
  .dk-head h2 { font-size: 1.75rem; letter-spacing: -.03em; margin: 0; }
  .dk-head p { margin: 4px 0 0; color: var(--muted); }
  .dk-head > a { color: var(--gold); font-size: .92rem; white-space: nowrap; }

  .dk-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .dk-cat { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(160deg, #0c2a31, #08242a); }
  .dk-cat:hover { border-color: #4a6b72; }
  .dk-cat .icon { width: 28px; height: 28px; color: var(--gold); }
  .dk-cat b { font-size: .98rem; line-height: 1.25; }
  .dk-cat small { color: var(--muted); font-size: .8rem; margin-top: -8px; }

  .dk-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .dk-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dk-cards .profile-card { border-radius: 14px; }
  .dk-cards .profile-card:hover { border-color: #3d6670; }

  .dk-editorial { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; }
  .dk-story { position: relative; border-radius: 18px; overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; }
  .dk-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .dk-story::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, #051b20cc 55%, #051b20); }
  .dk-story div { position: relative; z-index: 1; padding: 32px; max-width: 560px; }
  .dk-story small { color: var(--gold); font-size: .85rem; }
  .dk-story h3 { font-size: 2rem; line-height: 1.1; letter-spacing: -.03em; margin: 8px 0 10px; }
  .dk-story p { color: #cfdcdf; margin: 0; }
  .dk-side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
  .dk-mini { display: grid; grid-template-columns: 44% 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); }
  .dk-mini img { width: 100%; height: 100%; object-fit: cover; }
  .dk-mini div { padding: 22px; }
  .dk-mini h3 { margin: 0 0 6px; font-size: 1.2rem; }
  .dk-mini p { margin: 0 0 14px; color: var(--muted); font-size: .92rem; }
  .dk-mini em { color: var(--gold); font-weight: 650; font-size: .9rem; font-style: normal; }

  .dk-ad { position: relative; border-radius: 18px; overflow: hidden; min-height: 220px; display: flex; align-items: center; }
  .dk-ad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .dk-ad::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #051b20f2 25%, #051b2033 70%); }
  .dk-ad div { position: relative; z-index: 1; padding: 36px; max-width: 520px; }
  .dk-ad small { color: var(--gold); }
  .dk-ad h3 { font-size: 2rem; letter-spacing: -.03em; margin: 6px 0 8px; line-height: 1.1; }
  .dk-ad p { color: #d3dfe1; margin: 0 0 18px; }

  .dk-biz { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
  .dk-biz h2 { font-size: 2.4rem; line-height: 1.1; letter-spacing: -.04em; margin: 0 0 14px; }
  .dk-biz > div > p { color: var(--muted); font-size: 1.05rem; margin: 0 0 22px; max-width: 46ch; }
  .dk-biz ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
  .dk-biz li { display: flex; gap: 12px; align-items: flex-start; }
  .dk-biz li .icon { color: var(--gold); width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
  .dk-row { display: flex; gap: 12px; flex-wrap: wrap; }
  .dk-preview { border: 1px solid #2f5058; border-radius: 18px; background: linear-gradient(160deg, #0e2f36, #08242a); padding: 24px; box-shadow: 0 30px 60px #0008; }
  .dk-preview header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
  .dk-preview header span { font-size: .78rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
  .dk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
  .dk-kpi { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #0a262c; }
  .dk-kpi small { color: var(--muted); font-size: .75rem; }
  .dk-kpi b { display: block; font-size: 1.7rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .dk-kpi.gold b { color: var(--gold); }
  .dk-bars { display: flex; align-items: flex-end; gap: 5px; height: 110px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
  .dk-bars i { flex: 1; background: linear-gradient(180deg, var(--gold), #c99b3f); border-radius: 3px 3px 0 0; opacity: .85; }
  .dk-quote { margin-top: 16px; display: flex; gap: 12px; align-items: center; border: 1px solid #9d81376e; border-left: 3px solid var(--gold); border-radius: 10px; padding: 10px 14px; background: #0c2a30; font-size: .86rem; }
  .dk-quote span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Encabezado de página interior */
  .dk-pagehead { padding: 8px 0 28px; margin-bottom: 32px; border-bottom: 1px solid var(--line2); }
  .dk-crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
  .dk-crumbs a { color: var(--gold); }
  .dk-pagehead h1 { font-size: 2.5rem; letter-spacing: -.04em; margin: 0 0 6px; }
  .dk-pagehead > p { color: var(--muted); margin: 0 0 24px; }
  .dk-pagehead .dk-search { max-width: 860px; box-shadow: none; }

  /* Directorio */
  .dk-dir { display: grid; grid-template-columns: 270px 1fr; gap: 40px; }
  .dk-filters h3 { font-size: .85rem; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
  .dk-filters ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 2px; }
  .dk-filters li a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: .92rem; color: #d3dfe1; }
  .dk-filters li a:hover { background: #0c2a30; }
  .dk-filters li a.current { background: var(--panel2); color: var(--gold); font-weight: 650; }
  .dk-filters li small { color: var(--muted); }
  .dk-results-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: var(--muted); font-size: .92rem; }
  .dk-dir .pagination { margin-top: 28px; }

  /* Ficha */
  .dk-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 200px 200px; gap: 12px; margin: 0 0 32px; }
  .dk-gallery.one { grid-template-columns: 1fr; grid-template-rows: 380px; }
  .dk-gallery img, .dk-gallery .image-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
  .dk-gallery > :first-child { grid-row: 1 / span 2; }
  .dk-gallery.one > :first-child { grid-row: auto; }
  .dk-detail { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start; }
  .dk-detail .cat { color: var(--gold); font-size: .9rem; }
  .dk-detail h1 { font-size: 2.6rem; letter-spacing: -.04em; margin: 6px 0; }
  .dk-meta { display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); font-size: .92rem; margin-bottom: 24px; }
  .dk-meta span { display: inline-flex; gap: 6px; align-items: center; }
  .dk-meta .icon { width: 18px; height: 18px; }
  .dk-detail h2 { font-size: 1.2rem; margin: 32px 0 10px; }
  .dk-detail p { color: #cfdcdf; max-width: 65ch; white-space: pre-line; }
  .dk-sticky { position: sticky; top: 100px; border: 1px solid #2f5058; border-radius: 18px; background: var(--panel); padding: 24px; }
  .dk-sticky h3 { margin: 0 0 4px; font-size: 1.2rem; }
  .dk-sticky .sub { color: var(--muted); font-size: .88rem; margin: 0 0 16px; }
  .dk-sticky .dk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 0; }
  .dk-sticky .quote-box { margin-top: 18px; padding-top: 18px; }
  .dk-sticky .quote-box h2 { margin-top: 0; }
  .dk-sticky > button[data-favorite] { width: 100%; margin-top: 10px; }

  /* Páginas interiores aún sin diseño propio: grillas más anchas */
  .categories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .content-grid, .two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .narrow, .form-card.narrow { max-width: 520px; width: 100%; margin: 24px auto; }
  .filters { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) 150px 130px; align-items: end; gap: 14px; }
  .filters .field { grid-column: auto; }
}

@media (min-width: 1000px) {
  /* Revista, comunidad y beneficios */
  .content-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
  .content-card { border-radius: 16px; background: var(--panel); }
  .content-card:hover { border-color: #3d6670; }
  .content-card > div { padding: 18px 20px 22px; }
  .content-card h3 { font-size: 1.2rem; line-height: 1.25; }
  .content-card.is-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; }
  .content-card.is-feature img { height: 100%; min-height: 340px; aspect-ratio: auto; }
  .content-card.is-feature > div { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
  .content-card.is-feature h3 { font-size: 2rem; letter-spacing: -.03em; line-height: 1.1; }
  .content-card.is-feature p { font-size: 1rem; }
  .content-detail { max-width: 780px; margin: 0 auto; }
  .content-detail h1 { font-size: 2.6rem; letter-spacing: -.04em; }
  .content-detail .hero-image { border-radius: 18px; }
  .content-body { font-size: 1.08rem; }

  /* Categorías */
  .dk-catlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .dk-catlist a { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, #0c2a31, #08242a); }
  .dk-catlist a:hover { border-color: #4a6b72; }
  .dk-catlist .icon { width: 34px; height: 34px; color: var(--gold); }
  .dk-catlist b { display: block; font-size: 1.15rem; }
  .dk-catlist small { color: var(--muted); }
  .dk-catlist em { font-style: normal; color: var(--gold); font-size: .9rem; white-space: nowrap; }

  /* Planes */
  .plans-head { text-align: center; margin: 8px auto 32px; }
  .plans-head p { margin: 0 auto; font-size: 1.05rem; }
  .plans-head h1 { font-size: 2.6rem; }
  .plan-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; }
  .plan-card { padding: 28px; border-radius: 18px; background: var(--panel); }
  .plan-card.is-best { background: linear-gradient(170deg, #12343b, #0b2a30); box-shadow: inset 0 0 0 1px #c99b3f, 0 24px 50px #0006; }
  .plan-price { font-size: 2.6rem; margin: 6px 0; }
  .plans-note { text-align: center; }

  /* Ingresar y registro: foto a la izquierda, formulario a la derecha */
  main[data-page="/ingresar"], main[data-page="/registro"] {
    max-width: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 77px);
  }
  main[data-page="/ingresar"]::before, main[data-page="/registro"]::before {
    content: ''; background: linear-gradient(180deg, #051b2033, #051b20cc), url('/images/businesses/empresa1.png') center / cover no-repeat;
  }
  main[data-page="/ingresar"] > *, main[data-page="/registro"] > * { grid-column: 2; align-self: center; justify-self: center; width: min(460px, calc(100% - 64px)); }
  main[data-page="/ingresar"] .form-card, main[data-page="/registro"] .form-card { background: transparent; border: 0; padding: 0; }
  main[data-page="/ingresar"] h1, main[data-page="/registro"] h1 { font-size: 2.3rem; }

  /* Cuenta, negocio y pantallas de formulario: columna cómoda */
  main[data-page="/cuenta"], main[data-page="/negocio"], main[data-page="/datos-personales"], main[data-page="/favoritos"] { max-width: 1000px; }
}