/* Portal Nutreco - diseño moderno (reemplaza a Bootstrap 4 + owl carousel + tema "Universal") */

:root {
  --azul: #005BAB; --azul-osc: #0B3861; --celeste: #6BCFF6; --oscuro: #2B2C36; --acento: #E08A00;
  --bg: #f4f6f9; --panel: #ffffff; --txt: #1c2330; --mut: #5f6b7a; --line: #e1e6ec;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .06);
  --sombra-hover: 0 6px 24px rgba(0, 91, 171, .18);
  --radio: 14px;
  --azul-ui: #005BAB;
  --claude: #D97757; --btn-claude: #B4532F; --btn-claude-h: #9C4626;
  --dest-bg: linear-gradient(135deg, #FFF7F1 0%, #FFE5D3 100%); --dest-bd: #F2C7B0; --dest-tit: #3a1f12; --dest-txt: #6b4535;
  --chip-bg: rgba(217, 119, 87, .15); --chip-txt: #8A3F22; --dest-sombra: 0 10px 30px rgba(180, 83, 47, .18);
  --gen-bg: linear-gradient(135deg, #F0F8FF 0%, #D2E9FC 100%); --gen-bd: #B7D8F4; --gen-tit: #0B2A4A; --gen-txt: #25507a;
  --gen-chip-bg: rgba(0, 91, 171, .12); --gen-chip-txt: #004a8c; --gen-sombra: 0 10px 30px rgba(0, 91, 171, .14); --btn-ia: #005BAB; --btn-ia-h: #004a8c;
  /* Portada: degradé de azul claro */
  --hero-bg: linear-gradient(135deg, #DDF1FD 0%, #94D2F7 50%, #46A0E8 100%);
  --hero-txt: #0B2A4A; --hero-sub: #1d4a75; --hero-kicker: #005BAB;
  --hero-glow: rgba(255, 255, 255, .65); --hero-glow2: rgba(0, 91, 171, .22);
  --hero-input-bg: #ffffff; --hero-input-txt: #1c2330; --hero-input-bd: rgba(11, 56, 97, .16);
  --hero-ph: #6b7f93; --hero-ico: #5b7a99;
  --hero-sombra: 0 8px 24px rgba(11, 56, 97, .16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171c; --panel: #1c2128; --txt: #e6e9ef; --mut: #98a2b3; --line: #2c333d;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --sombra-hover: 0 6px 24px rgba(107, 207, 246, .16);
    --hero-bg: linear-gradient(135deg, #10283f 0%, #1a4f87 55%, #2d86d0 100%);
    --hero-txt: #ffffff; --hero-sub: #cfe3f5; --hero-kicker: #8fd8fb;
    --hero-glow: rgba(107, 207, 246, .20); --hero-glow2: rgba(0, 0, 0, .25);
    --hero-input-bg: rgba(255, 255, 255, .10); --hero-input-txt: #ffffff; --hero-input-bd: rgba(255, 255, 255, .25);
    --hero-ph: #aab6c4; --hero-ico: #9fb4c9; --hero-sombra: none; --azul-ui: #6BCFF6; --claude: #D97757; --dest-bg: linear-gradient(135deg, #2b1d16 0%, #3d2418 100%); --dest-bd: #5a3a2b; --dest-tit: #fff1e8; --dest-txt: #e4c7b8; --chip-bg: rgba(217, 119, 87, .24); --chip-txt: #ffc9ae; --dest-sombra: 0 10px 30px rgba(0, 0, 0, .35); --gen-bg: linear-gradient(135deg, #14283d 0%, #1b3a5c 100%); --gen-bd: #2d5379; --gen-tit: #eaf4ff; --gen-txt: #b9d3ea; --gen-chip-bg: rgba(107, 207, 246, .18); --gen-chip-txt: #bfe8fb; --gen-sombra: 0 10px 30px rgba(0, 0, 0, .35); --btn-ia: #1F6FB5; --btn-ia-h: #185a96;
  }
}
:root[data-theme="dark"] {
  --bg: #14171c; --panel: #1c2128; --txt: #e6e9ef; --mut: #98a2b3; --line: #2c333d;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --sombra-hover: 0 6px 24px rgba(107, 207, 246, .16);
  --hero-bg: linear-gradient(135deg, #10283f 0%, #1a4f87 55%, #2d86d0 100%);
  --hero-txt: #ffffff; --hero-sub: #cfe3f5; --hero-kicker: #8fd8fb;
  --hero-glow: rgba(107, 207, 246, .20); --hero-glow2: rgba(0, 0, 0, .25);
  --hero-input-bg: rgba(255, 255, 255, .10); --hero-input-txt: #ffffff; --hero-input-bd: rgba(255, 255, 255, .25);
  --hero-ph: #aab6c4; --hero-ico: #9fb4c9; --hero-sombra: none; --azul-ui: #6BCFF6; --claude: #D97757; --dest-bg: linear-gradient(135deg, #2b1d16 0%, #3d2418 100%); --dest-bd: #5a3a2b; --dest-tit: #fff1e8; --dest-txt: #e4c7b8; --chip-bg: rgba(217, 119, 87, .24); --chip-txt: #ffc9ae; --dest-sombra: 0 10px 30px rgba(0, 0, 0, .35); --gen-bg: linear-gradient(135deg, #14283d 0%, #1b3a5c 100%); --gen-bd: #2d5379; --gen-tit: #eaf4ff; --gen-txt: #b9d3ea; --gen-chip-bg: rgba(107, 207, 246, .18); --gen-chip-txt: #bfe8fb; --gen-sombra: 0 10px 30px rgba(0, 0, 0, .35); --btn-ia: #1F6FB5; --btn-ia-h: #185a96;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--txt);
       font: 15px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
a { color: var(--azul-ui); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.contenedor { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }

/* ---------- Barra superior ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--panel) 88%, transparent);
          backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
          border-bottom: 1px solid var(--line); }
.topbar .contenedor { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.marca-txt { color: var(--txt); text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: .01em; white-space: nowrap; }
.marca-txt:hover { color: var(--azul-ui); }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px; color: var(--txt);
         text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.nav a:hover { background: color-mix(in srgb, var(--azul-ui) 12%, transparent); color: var(--azul-ui); }
.nav a .fa { color: var(--azul-ui); }
.btn-tema { border: 1px solid var(--line); background: var(--panel); color: var(--txt); width: 38px; height: 38px;
            border-radius: 10px; cursor: pointer; font-size: 16px; flex: none; }
.btn-tema:hover { border-color: var(--azul-ui); color: var(--azul-ui); }

/* ---------- Hero ---------- */
.hero { background: var(--hero-bg); color: var(--hero-txt); position: relative; overflow: hidden; }
/* Brillos suaves sobre el degradé (en lugar de figuras geométricas) */
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
                background: radial-gradient(60% 90% at 12% 0%, var(--hero-glow) 0%, transparent 60%),
                            radial-gradient(50% 80% at 100% 100%, var(--hero-glow2) 0%, transparent 65%); }
.hero .contenedor { padding-top: 46px; padding-bottom: 78px; position: relative; z-index: 1; }
/* Logo y texto de la portada, uno al lado del otro (se apilan si no hay lugar) */
.hero-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.hero-texto { flex: 1 1 340px; min-width: 0; }/* Logo grande dentro de la portada; el fondo blanco lo mantiene legible en tema claro y oscuro */
.hero-logo { display: inline-flex; flex: none; background: #fff; border-radius: 18px; padding: 12px 22px;
             box-shadow: 0 8px 24px rgba(11, 56, 97, .18); }
.hero-logo img { display: block; height: 80px; width: auto; }
.hero h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.15; margin: 0 0 8px; font-weight: 700; color: var(--hero-txt); }
.hero p { margin: 0; color: var(--hero-sub); max-width: 58ch; font-size: 16px; }
.buscador { position: relative; margin-top: 24px; max-width: 560px; }
.buscador .fa { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--hero-ico); pointer-events: none; }
.buscador input { width: 100%; padding: 14px 16px 14px 44px; border-radius: 12px; border: 1px solid var(--hero-input-bd);
                  background: var(--hero-input-bg); color: var(--hero-input-txt); font: inherit; font-size: 16px;
                  box-shadow: var(--hero-sombra); }
.buscador input::placeholder { color: var(--hero-ph); }
.buscador input:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(0, 91, 171, .25); }

/* ---------- Secciones ---------- */
.seccion { padding: 38px 0 6px; }
.seccion-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 18px; }
.seccion-cab h2 { margin: 0; font-size: 22px; }
.seccion-cab p { margin: 0; color: var(--mut); }
/* Buscador de aplicaciones: junto al título de la sección (PC) y debajo del título (celular) */
.buscador-caja { flex: 1 1 280px; max-width: 440px; }
.seccion-cab .buscador { margin-top: 0; max-width: none; }
.seccion-cab .buscador input { padding: 11px 14px 11px 40px; font-size: 15px; }
.seccion-cab .buscador .fa { left: 14px; }.contador { margin-left: auto; color: var(--mut); font-size: 13px; }

/* ---------- Tarjetas de aplicaciones ---------- */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.app-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radio);
            overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--sombra);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.app-card:hover, .app-card:focus-visible { transform: translateY(-4px); box-shadow: var(--sombra-hover); border-color: var(--celeste); }
.app-img { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #EAF3FB, #CFE3F5); display: grid; place-items: center;
           overflow: hidden; position: relative; }
.app-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
               transition: transform .35s ease; }
.app-card:hover .app-img img { transform: scale(1.04); }
.app-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.app-body h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.app-body p { margin: 0; color: var(--mut); font-size: 14px; }
.app-abrir { margin-top: auto; padding-top: 10px; color: var(--azul-ui); font-weight: 600; font-size: 13px; }
.app-abrir .fa { margin-left: 4px; transition: transform .18s ease; }
.app-card:hover .app-abrir .fa { transform: translateX(3px); }
.vacio { grid-column: 1 / -1; text-align: center; color: var(--mut); padding: 34px 10px; background: var(--panel);
         border: 1px dashed var(--line); border-radius: var(--radio); }

/* ---------- Instructivos ---------- */
.doc-card { display: flex; gap: 16px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line);
            border-radius: var(--radio); padding: 18px; text-decoration: none; color: inherit; box-shadow: var(--sombra);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.doc-card:hover, .doc-card:focus-visible { transform: translateY(-3px); box-shadow: var(--sombra-hover); border-color: var(--celeste); }
.doc-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 22px;
           color: #fff; background: linear-gradient(135deg, var(--azul), #33A9E0); }
.doc-card h3 { margin: 0 0 3px; font-size: 16px; line-height: 1.25; }
.doc-card p { margin: 0; color: var(--mut); font-size: 14px; }
.etiqueta { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 8px; border-radius: 99px;
            background: var(--acento); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.doc-acciones { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--azul-ui); }

/* ---------- Instructivos destacados (dos tarjetas del mismo tamaño) ---------- */
.destacado { margin-top: -34px; position: relative; z-index: 2; }
.ia-lista { display: grid; gap: 14px; grid-auto-rows: 1fr; }
.ia-card { --c-bg: var(--dest-bg); --c-bd: var(--dest-bd); --c-tit: var(--dest-tit); --c-txt: var(--dest-txt);
           --c-chip-bg: var(--chip-bg); --c-chip-txt: var(--chip-txt); --c-sombra: var(--dest-sombra);
           --c-btn: var(--btn-claude); --c-btn-h: var(--btn-claude-h);
           display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; min-height: 140px;
           padding: 18px 24px; border-radius: 18px; background: var(--c-bg); border: 1px solid var(--c-bd); box-shadow: var(--c-sombra); }
.ia-card.ia-ia { --c-bg: var(--gen-bg); --c-bd: var(--gen-bd); --c-tit: var(--gen-tit); --c-txt: var(--gen-txt);
                 --c-chip-bg: var(--gen-chip-bg); --c-chip-txt: var(--gen-chip-txt); --c-sombra: var(--gen-sombra);
                 --c-btn: var(--btn-ia); --c-btn-h: var(--btn-ia-h); }
.ia-logos { width: 92px; height: 92px; border-radius: 20px; background: #fff; display: grid; place-items: center; flex: none;
            box-shadow: 0 4px 14px rgba(11, 56, 97, .16); }
.ia-logos img { display: block; width: 54px; height: 54px; }
.ia-logos.ia-n4 { grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; }
.ia-logos.ia-n4 img { width: 32px; height: 32px; }
.ia-logos .fa { font-size: 34px; color: var(--azul); }
.ia-info h2 .etiqueta { margin: 0 0 0 10px; font-size: 11px; vertical-align: middle; position: relative; top: -1px; }
.ia-info h2 { margin: 0 0 4px; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.2; color: var(--c-tit); }
.ia-info p { margin: 0; color: var(--c-txt); font-size: 14px; max-width: 92ch; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 0; list-style: none; }
.chips li { background: var(--c-chip-bg); color: var(--c-chip-txt); border-radius: 99px; padding: 2px 11px; font-size: 12.5px; font-weight: 600; }
.btn-ia { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--c-btn); color: #fff;
          text-decoration: none; font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 12px; white-space: nowrap;
          box-shadow: 0 6px 16px rgba(11, 56, 97, .22); transition: background .18s ease, transform .18s ease; }
.btn-ia:hover, .btn-ia:focus-visible { background: var(--c-btn-h); color: #fff; transform: translateY(-2px); }
/* PC: los dos instructivos, uno al lado del otro y a la misma altura (el botón queda abajo, a todo el ancho) */
@media (min-width: 901px) {
  .ia-lista { grid-template-columns: 1fr 1fr; }
  .ia-card { grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; grid-template-areas: "logos info" "boton boton";
             align-items: start; gap: 18px 22px; }
  .ia-card .ia-logos { grid-area: logos; }
  .ia-card .ia-info { grid-area: info; }
  .ia-card .btn-ia { grid-area: boton; width: 100%; }
}
/* ---------- Pie ---------- */
.pie { margin-top: 48px; background: var(--azul-osc); color: #cfe0f0; }
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie .contacto { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie .contacto .fa { margin-right: 7px; color: var(--celeste); }
.pie small { display: block; opacity: .85; }

@media (max-width: 640px) {
  .topbar .contenedor { gap: 10px; }
  .nav a span.txt { display: none; }
  .hero .contenedor { padding-top: 30px; padding-bottom: 64px; }
  .hero-logo { padding: 9px 16px; }
  .hero-logo img { height: 58px; }
  .ia-card { grid-template-columns: 1fr; padding: 18px; gap: 14px; min-height: 0; }
  .ia-logos { width: 80px; height: 80px; border-radius: 18px; }
  .ia-logos img { width: 48px; height: 48px; }
  .ia-logos.ia-n4 img { width: 28px; height: 28px; }
  .btn-ia { width: 100%; }
  .buscador-caja { flex: 1 1 100%; max-width: none; }
  .contador { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}