/* ===========================================================================
   Escaparate de demos · GoServix
   Paleta e identidad del sitio (Poppins · azul #1091EF · naranja #FF7F22 ·
   navy #0A2540) para que /studio/ no parezca otra web al llegar desde
   www.goservix.com. Neutros con sesgo azulado, no grises puros.
   =========================================================================== */
:root{
  --tinta:#0A2540;          /* navy de marca */
  --tinta-2:#1B3A5C;
  --gris:#5A6B80;
  --gris-2:#8A99AC;
  --linea:#E1E8F0;
  --fondo:#FFFFFF;
  --fondo-2:#F6F9FC;
  --azul:#1091EF;
  --azul-osc:#0B72BE;
  --naranja:#FF7F22;
  --radio:12px;
  --sombra:0 1px 2px rgba(10,37,64,.06), 0 8px 24px rgba(10,37,64,.07);
  --sombra-alta:0 18px 44px rgba(10,37,64,.18);
  --ancho:1320px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:6px}

/* ---------- cabecera ---------- */
.top{position:sticky;top:0;z-index:40;height:64px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 32px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;letter-spacing:-.01em}
.marca .rayo{color:var(--azul);font-size:20px;line-height:1}
.marca .sub{font-weight:500;color:var(--gris);font-size:15px}
.top nav{display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;gap:7px;font:600 14px/1 Poppins,system-ui,sans-serif;
  padding:11px 18px;border-radius:9px;border:1.5px solid transparent;transition:.16s ease;white-space:nowrap;cursor:pointer}
.btn-pri{background:var(--azul);color:#fff}
.btn-pri:hover{background:var(--azul-osc)}
.btn-fan{background:var(--naranja);color:#fff}
.btn-fan:hover{background:#E66D10}
.btn-sec{border-color:var(--linea);color:var(--tinta);background:#fff}
.btn-sec:hover{border-color:var(--tinta);}
.btn-txt{color:var(--gris);padding:11px 10px}
.btn-txt:hover{color:var(--tinta)}

/* ---------- hero ---------- */
.hero{max-width:900px;margin:0 auto;padding:50px 24px 26px;text-align:center}
.hero .ojo{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--azul);background:#E8F4FE;padding:6px 13px;border-radius:999px;margin-bottom:18px}
.hero h1{margin:0 0 14px;font-size:clamp(30px,4.6vw,50px);line-height:1.06;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.hero p{margin:0 auto 30px;max-width:640px;color:var(--gris);font-size:17px;text-wrap:pretty}
.buscador{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto;background:#fff;
  border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:15px 20px}
.buscador:focus-within{border-color:var(--azul);box-shadow:0 0 0 4px rgba(16,145,239,.13)}
.buscador svg{flex:none;color:var(--gris-2)}
.buscador input{flex:1;border:0;outline:0;font:400 16px/1.4 Poppins,system-ui,sans-serif;color:var(--tinta);background:transparent;min-width:0}
.buscador input::placeholder{color:var(--gris-2)}

/* ---------- barra de resultados ---------- */
.barra{max-width:var(--ancho);margin:26px auto 0;padding:0 32px;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between}
.barra .n{font-weight:600;font-size:14px}
.barra .n em{font-style:normal;color:var(--gris);font-weight:500}

/* ---------- cuerpo ---------- */
.cuerpo{max-width:var(--ancho);margin:18px auto 64px;padding:0 32px;display:grid;grid-template-columns:212px 1fr;gap:44px}
.caja-filtros > summary{display:none}
.caja-filtros{border:0}
.filtros h4{margin:22px 0 9px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.filtros h4:first-child{margin-top:0}
.filtros label{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--tinta-2);padding:5px 0;cursor:pointer;line-height:1.35}
.filtros input[type=checkbox]{margin:2px 0 0;accent-color:var(--azul);width:15px;height:15px;flex:none}
.sectores a{display:block;font-size:14px;padding:5px 0;color:var(--tinta-2);border-left:2px solid transparent;padding-left:10px;margin-left:-12px}
.sectores a:hover{color:var(--azul)}
.sectores a.on{font-weight:600;color:var(--tinta);border-left-color:var(--azul)}
.limpiar{margin-top:20px;font-size:13px;color:var(--azul);cursor:pointer;background:none;border:0;padding:0;font-family:inherit}
.limpiar:hover{text-decoration:underline}

.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 30px;align-content:start}
.rejilla > h2{grid-column:1/-1;margin:0;font-size:21px;font-weight:600;letter-spacing:-.01em}

/* ---------- tarjeta ---------- */
.tarjeta{position:relative;display:block;border-radius:var(--radio);overflow:hidden;background:var(--fondo-2);
  aspect-ratio:16/10;box-shadow:var(--sombra);transition:transform .18s ease, box-shadow .18s ease}
.tarjeta:hover,.tarjeta:focus-visible{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.tarjeta img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tarjeta .velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,37,64,.55),rgba(10,37,64,0) 46%);
  opacity:0;transition:opacity .18s ease}
.tarjeta:hover .velo,.tarjeta:focus-visible .velo{opacity:1}
.tarjeta .pil{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:9px;
  background:var(--tinta);color:#fff;font-size:13px;padding:7px 13px;border-radius:999px;
  opacity:0;transform:translateY(5px);transition:.18s ease}
.tarjeta .pil b{font-weight:600}
.tarjeta .pil i{font-style:normal;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(255,255,255,.19);padding:3px 7px;border-radius:999px}
.tarjeta .ver{position:absolute;right:14px;bottom:14px;background:#fff;color:var(--tinta);font-weight:600;font-size:13px;
  padding:8px 13px;border-radius:9px;opacity:0;transform:translateY(5px);transition:.18s ease;box-shadow:0 2px 10px rgba(10,37,64,.2)}
.tarjeta:hover .pil,.tarjeta:hover .ver,.tarjeta:focus-visible .pil,.tarjeta:focus-visible .ver{opacity:1;transform:none}
.tarjeta .nuevo{position:absolute;top:12px;right:12px;background:var(--naranja);color:#fff;font-size:11px;font-weight:600;
  padding:5px 11px;border-radius:999px;letter-spacing:.03em}
.pie-tarjeta{margin-top:11px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pie-tarjeta b{font-weight:600;font-size:15px}
.pie-tarjeta span{font-size:13px;color:var(--gris)}
.celda{display:block}

/* ---------- bloque IA ---------- */
.promo{grid-column:1/-1;background:linear-gradient(105deg,#0A2540 0%,#123A63 62%,#0F4C82 100%);color:#fff;
  border-radius:16px;padding:38px 40px;display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center}
.promo h3{margin:0 0 10px;font-size:25px;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.promo p{margin:0 0 22px;color:#C6D6E6;font-size:15px;max-width:46ch}
.promo .paleta{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}
.promo .paleta span{width:40px;height:40px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.vacio{grid-column:1/-1;color:var(--gris);font-size:15px;padding:34px 0;text-align:center;
  border:1px dashed var(--linea);border-radius:var(--radio)}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea);background:var(--fondo-2)}
.pie .dentro{max-width:var(--ancho);margin:0 auto;padding:28px 32px;display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:space-between;color:var(--gris);font-size:13px}
.pie a{color:var(--tinta-2);font-weight:500}
.pie a:hover{color:var(--azul)}
.aviso{background:#FFF6EE;border:1px solid #FFD9B8;color:#8A4A05;border-radius:10px;padding:11px 16px;
  font-size:13.5px;max-width:var(--ancho);margin:0 auto}

/* ===========================  FICHA  =========================== */
.ficha{max-width:var(--ancho);margin:0 auto;padding:26px 32px 60px;display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:36px;align-items:start}
.ficha > section{min-width:0}
.migas{max-width:var(--ancho);margin:0 auto;padding:20px 32px 0;font-size:13px;color:var(--gris)}
.migas a:hover{color:var(--azul)}
.visor{border:1px solid var(--linea);border-radius:14px;overflow:hidden;background:var(--fondo-2);box-shadow:var(--sombra);min-width:0}
.visor .barra-visor{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--linea);background:#fff;min-width:0}
.puntos{display:flex;gap:6px}.puntos i{width:10px;height:10px;border-radius:50%;background:#E1E8F0;display:block}
.urlfake{flex:1 1 0;min-width:0;background:var(--fondo-2);border-radius:7px;padding:6px 12px;font-size:12.5px;color:var(--gris);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,monospace}
.disp{display:flex;gap:4px;background:var(--fondo-2);border-radius:8px;padding:3px}
.disp button{border:0;background:transparent;font:600 12.5px/1 Poppins,system-ui,sans-serif;color:var(--gris);
  padding:7px 12px;border-radius:6px;cursor:pointer}
.disp button.on{background:#fff;color:var(--tinta);box-shadow:0 1px 3px rgba(10,37,64,.14)}
.lienzo{background:var(--fondo-2);padding:0;display:flex;justify-content:center;transition:padding .2s ease}
.lienzo.movil{padding:26px 0}
.lienzo iframe{width:100%;max-width:100%;height:720px;border:0;background:#fff;display:block;transition:width .2s ease, border-radius .2s ease}
.lienzo.movil iframe{width:390px;height:720px;border-radius:26px;box-shadow:0 0 0 9px #12233A, 0 22px 46px rgba(10,37,64,.3)}

.panel h1{margin:0 0 4px;font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.panel .sect{color:var(--gris);font-size:14.5px;margin:0 0 18px}
.panel .res{font-size:15px;color:var(--tinta-2);margin:0 0 22px}
.panel h3{margin:26px 0 10px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.temas{display:flex;flex-direction:column;gap:8px}
.tema-op{display:flex;align-items:center;gap:12px;border:1.5px solid var(--linea);background:#fff;border-radius:11px;
  padding:10px 12px;cursor:pointer;text-align:left;font:inherit;transition:.15s ease;width:100%}
.tema-op:hover{border-color:var(--gris-2)}
.tema-op.on{border-color:var(--azul);box-shadow:0 0 0 3px rgba(16,145,239,.13)}
.tema-op .muestra{display:flex;flex:none;border-radius:7px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(10,37,64,.08)}
.tema-op .muestra i{width:15px;height:30px;display:block}
.tema-op .txt{min-width:0}
.tema-op .txt b{display:block;font-weight:600;font-size:14px;line-height:1.25}
.tema-op .txt span{display:block;font-size:12px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:var(--fondo-2);border:1px solid var(--linea);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--tinta-2)}
.panel .btn{width:100%;justify-content:center;margin-top:8px}
.panel .nota{font-size:12.5px;color:var(--gris);margin:10px 0 0;line-height:1.5}
.otras{max-width:var(--ancho);margin:0 auto;padding:0 32px 70px}
.otras h2{font-size:20px;font-weight:600;margin:0 0 18px;letter-spacing:-.01em}
.otras .rejilla{grid-template-columns:repeat(4,1fr);gap:26px 22px}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .cuerpo{grid-template-columns:1fr;gap:26px}
  .filtros{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .ficha{grid-template-columns:minmax(0,1fr)}
  .otras .rejilla{grid-template-columns:repeat(2,1fr)}
  .promo{grid-template-columns:1fr}
  .promo .paleta{justify-content:flex-start}
}
@media(max-width:640px){
  .top{padding:0 18px}.top .oculta-movil{display:none}
  .hero{padding:44px 20px 22px}
  .barra,.cuerpo,.pie .dentro,.migas,.ficha,.otras{padding-left:18px;padding-right:18px}
  .rejilla,.otras .rejilla{grid-template-columns:1fr}
  .filtros{grid-template-columns:1fr}
  .caja-filtros{border:1px solid var(--linea);border-radius:var(--radio);background:var(--fondo-2);overflow:hidden}
  .caja-filtros > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
    list-style:none;cursor:pointer;padding:14px 16px;font-weight:600;font-size:14.5px}
  .caja-filtros > summary::-webkit-details-marker{display:none}
  .caja-filtros > summary::after{content:'▾';color:var(--gris);transition:transform .18s ease}
  .caja-filtros[open] > summary::after{transform:rotate(180deg)}
  .caja-filtros[open] > summary{border-bottom:1px solid var(--linea)}
  .caja-filtros .filtros{padding:6px 16px 18px}
  .lienzo iframe{height:560px}
  .visor .barra-visor{padding:9px 11px}
  .urlfake{font-size:11.5px;padding:5px 9px}
  .disp{display:none}                 /* en un móvil, «ver en móvil» ya está pasando */
  .lienzo.movil{padding:0}
  .lienzo.movil iframe{width:100%;border-radius:0;box-shadow:none}
  .promo{padding:28px 22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}