/* Añadidos a base.css (el diseño de la web de Laura) para la web completa de UpKontent */

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:12px; background:var(--paper); padding:8px 12px; z-index:10; }

/* ---------- CABECERA ---------- */
.site-head{
  position:sticky; top:0; z-index:5;
  background:rgba(255,255,255,0.94);
  backdrop-filter:saturate(1.4) blur(8px);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:58px;
}
.brand{
  display:flex; align-items:center; gap:8px;
  font-family:'Archivo', sans-serif; font-weight:800;
  font-size:20px; letter-spacing:-0.01em; line-height:1; color:var(--ink);
  text-decoration:none; flex:none;
}
.brand img{ width:34px; height:34px; display:block; }
.head-cta{ margin-top:0; flex:none; }
.site-nav{ border-bottom:1px solid var(--line); background:var(--paper); }
.site-nav ul{
  list-style:none; margin:0 auto; padding:0 20px;
  max-width:840px;
  display:flex; gap:20px;
  overflow-x:auto; scrollbar-width:none;
}
.site-nav ul::-webkit-scrollbar{ display:none; }
.site-nav a{
  display:block; padding:12px 0;
  font-size:12.5px; letter-spacing:0.03em;
  color:var(--ink-dim); text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); }

/* ---------- MIGAS ---------- */
.crumbs{ font-size:12px; color:var(--ink-dim); padding-top:22px; }
.crumbs a{ color:var(--ink-dim); }

/* ---------- TEXTO LARGO ---------- */
.prose{ font-size:16.5px; }
.prose p{ margin:0 0 16px; max-width:62ch; }
.prose h2{ font-size:clamp(22px, 5.5vw, 28px); margin:8px 0 16px; }
.prose h3{ font-size:17px; margin:26px 0 10px; }
.prose ul.list{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:9px; max-width:62ch; }
.prose ul.list li{ display:flex; gap:10px; }
.prose ul.list li::before{ content:'·'; color:var(--accent); font-weight:800; flex:none; }
.prose a{ color:var(--accent); }
.prose strong{ font-weight:600; }

/* ---------- TARJETAS DE SERVICIO ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:8px; }
@media (max-width:640px){ .svc-grid{ grid-template-columns:1fr; } }
.svc{
  display:block; text-decoration:none;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:20px; background:var(--paper);
  transition:border-color .15s ease, transform .15s ease;
}
.svc:hover{ border-color:var(--accent); transform:translateY(-1px); }
.svc h3{ font-size:17px; color:var(--ink); }
.svc p{ margin:8px 0 0; font-size:14.5px; color:var(--ink-dim); }
.svc span.more{ display:inline-block; margin-top:10px; font-size:12px; color:var(--accent); letter-spacing:.04em; text-transform:uppercase; }

/* ---------- MARCAS ---------- */
.logos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.logos span{
  border:1px solid var(--line-strong); border-radius:20px;
  padding:6px 12px; font-size:13px; color:var(--ink);
}

/* ---------- CIFRAS ---------- */
.nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px; }
@media (max-width:640px){ .nums{ grid-template-columns:1fr; } }
.num{ border-top:2px solid var(--accent); padding-top:12px; }
.num b{ display:block; font-size:clamp(24px,6vw,30px); color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }
.num span{ font-size:14px; color:var(--ink-dim); }

/* ---------- PERSONAS ---------- */
.people{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px; }
@media (max-width:640px){ .people{ grid-template-columns:1fr; } }
.person{ border:1px solid var(--line-strong); border-radius:var(--radius); padding:22px; }
.person h3{ font-size:19px; }
.person .role{ display:block; margin-top:6px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.person p{ font-size:15px; color:var(--ink-dim); margin:12px 0 0; }
.person .handles{ margin-top:12px; display:flex; flex-wrap:wrap; gap:10px; font-size:13.5px; }
.person .handles a{ color:var(--accent); }

/* ---------- BLOQUE CTA ---------- */
.cta-block{
  background:var(--paper-raised); border-radius:var(--radius);
  padding:28px; margin:8px 0;
}
.cta-block h2{ font-size:clamp(22px,5.5vw,28px); }
.cta-block p{ color:var(--ink-dim); margin:10px 0 0; max-width:52ch; }

/* ---------- PIE ---------- */
.site-foot{ display:block; padding:0; letter-spacing:normal; font-size:inherit; background:var(--paper-raised); margin-top:24px; border-top:1px solid var(--line); }
.site-foot .wrap{ padding-top:36px; padding-bottom:36px; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:24px; }
@media (max-width:700px){ .site-foot .wrap{ grid-template-columns:1fr; } }
.site-foot h2{ font-size:13px; letter-spacing:.1em; margin-bottom:10px; color:var(--ink); }
.site-foot p, .site-foot li{ font-size:13.5px; color:var(--ink-dim); margin:0 0 6px; }
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot a{ color:var(--ink-dim); text-decoration:none; }
.site-foot a:hover{ color:var(--accent); }
.site-foot .legal{ grid-column:1/-1; border-top:1px solid var(--line); padding-top:16px; font-size:12px; }

/* ---------- MIKEL Y LAURA (14/10/2026: mezcla con viral.mikelserrano.com) ---------- */
:root{ --night:#0C0C0F; --amber:#1E9BF0; }

.duo{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:28px; }
.duo-card{ border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; background:var(--paper); text-decoration:none; color:inherit; display:block; }
.duo-card img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--paper-raised); }
.duo-card div{ padding:14px 16px 16px; }
.duo-card b{ display:block; font-size:16px; text-transform:uppercase; letter-spacing:.02em; }
.duo-card span{ display:block; font-size:12.5px; color:var(--ink-dim); margin-top:4px; }
.duo-card em{ font-style:normal; color:var(--accent); }

.logo-wall{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px,1fr)); gap:10px; margin-top:16px; }
.logo-wall div{ border:1px solid var(--line); border-radius:10px; height:72px; display:flex; align-items:center; justify-content:center; padding:6px 10px; background:var(--paper); overflow:hidden; }
.logo-wall img{ width:100%; height:100%; object-fit:contain; }

.dark-block{ background:var(--night); color:#fff; border-radius:20px; padding:30px 26px; }
.dark-block .section-num, .dark-block .eyebrow{ color:var(--amber); }
.dark-block .section-num::before{ background:var(--amber); }
.dark-block .section-title, .dark-block h3{ color:#fff; }
.dark-block .lede, .dark-block p{ color:rgba(255,255,255,.72); }
.dark-block .cta{ background:var(--amber); color:var(--night); }
.dark-block .cta:hover{ background:#4DB2F5; }
.dark-block .cta-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.dark-block .who{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.dark-block .who img{ width:48px; height:48px; border-radius:50%; object-fit:cover; background:#fff; }
.dark-block .who span{ font-size:13.5px; color:rgba(255,255,255,.8); }

.method{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:22px; }
@media (max-width:760px){ .method{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .method{ grid-template-columns:1fr; } }
.method div{ border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:16px; }
.method b{ display:block; font-size:30px; line-height:1; color:var(--amber); font-weight:800; }
.method h3{ font-size:15px; margin-top:10px; }
.method p{ font-size:13.5px; margin:8px 0 0; }

.dark-svcs{ display:grid; gap:10px; margin-top:22px; }
.dark-svcs div{ border-left:3px solid var(--amber); padding:4px 0 4px 14px; }
.dark-svcs h3{ font-size:15.5px; }
.dark-svcs p{ font-size:14px; margin:6px 0 0; }

.testis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }
@media (max-width:760px){ .testis{ grid-template-columns:1fr; } }
.testi{ background:rgba(255,255,255,.06); border-radius:14px; padding:18px; margin:0; }
.testi .stars{ color:var(--amber); letter-spacing:2px; font-size:13px; }
.testi blockquote{ margin:10px 0 0; font-size:14.5px; color:#fff; line-height:1.5; }
.testi figcaption{ margin-top:12px; font-size:12px; color:rgba(255,255,255,.6); }
.testi figcaption b{ display:block; color:#fff; font-weight:600; }

.light-testis .testi{ background:var(--paper-raised); }
.light-testis .testi blockquote{ color:var(--ink); }
.light-testis .testi figcaption{ color:var(--ink-dim); }
.light-testis .testi figcaption b{ color:var(--ink); }
.light-testis .testi .stars{ color:var(--accent); }

.paths{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:20px; }
@media (max-width:640px){ .paths{ grid-template-columns:1fr; } }
.path{ border-radius:var(--radius); padding:24px; }
.path.local{ background:var(--paper-raised); }
.path.marca{ background:var(--night); color:#fff; }
.path img{ width:56px; height:56px; border-radius:50%; object-fit:cover; background:#fff; }
.path h3{ font-size:18px; margin-top:12px; }
.path p{ font-size:14.5px; margin:8px 0 0; color:var(--ink-dim); }
.path.marca p{ color:rgba(255,255,255,.72); }
.path.marca .cta{ background:var(--amber); color:var(--night); }

.person img.photo{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; margin-bottom:16px; background:var(--paper-raised); }
.duo-card img, .person img.photo{ height:auto; }
@media (max-width:420px){ .duo-card b{ font-size:14px; } .duo-card span{ font-size:11.5px; } .duo-card div{ padding:12px; } }

/* ---------- MARCA UPKONTENT (azul) ---------- */
body{ font-family:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.hero h1 em, .section-title em{ color:var(--accent); }
.eyebrow::before{ background:#1E9BF0; }
.track-divider{ font-size:18px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }
.svc:hover{ border-color:#1E9BF0; }
.num{ border-top-color:#1E9BF0; }
.cta{ font-weight:600; }

/* ---------- BLOG ---------- */
.post-list{ display:grid; gap:12px; margin-top:8px; }
.post-card{ display:grid; grid-template-columns:110px 1fr; gap:16px; align-items:start; text-decoration:none; color:inherit; border:1px solid var(--line-strong); border-radius:var(--radius); padding:14px; transition:border-color .15s ease; }
.post-card:hover{ border-color:#1E9BF0; }
.post-card img{ width:110px; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:10px; background:var(--paper-raised); }
.post-card h3{ font-size:17px; margin-top:6px; }
.post-card p{ font-size:14px; color:var(--ink-dim); margin:8px 0 0; }
.post-meta{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.post-video{ display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:center; margin:8px 0 24px; }
@media (max-width:560px){ .post-video{ grid-template-columns:120px 1fr; gap:14px; } }
.post-video img{ width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:12px; border:1px solid var(--line-strong); }
.post-video p{ margin:0 0 8px; font-size:14.5px; color:var(--ink-dim); }
.datos{ background:var(--paper-raised); border-radius:var(--radius); padding:18px 20px; margin:6px 0 22px; max-width:62ch; }
.datos p{ margin:0 0 6px !important; font-size:15px; }
.byline{ font-size:13px; color:var(--ink-dim); margin-top:14px; }