/* wikitel.org · «Wiki en casa» · portada: Wiki como anfitrión (lo carga assets/pages/inicio.js) */
/* Hero */
.hero{padding:44px 0 0;overflow-x:clip}
.hero-rejilla{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:28px}
.hola{display:flex;align-items:center;gap:10px;font:700 1.05rem var(--f-texto);color:var(--azul-texto);margin-bottom:12px}
.hola-mini{display:none}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);margin-bottom:24px}
.hero-bocadillo{margin-bottom:26px;font-size:1.12rem}
.hero-bocadillo::after{content:"";position:absolute;right:-16px;top:38px;width:26px;height:26px;background:var(--papel-claro);border-top:var(--borde);border-right:var(--borde);transform:rotate(45deg) skew(8deg,8deg);border-radius:0 6px 0 0}
.atajos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;font-size:.95rem}
.atajos span{color:var(--tinta-suave);margin-right:4px}
.atajos a{padding:7px 13px;border-radius:999px;border:1.5px solid var(--linea);color:var(--tinta);text-decoration:none;font-weight:700;background:var(--papel-claro)}
@media (hover:hover){.atajos a:hover{background:var(--cielo)}}
.hero-wiki{position:relative;aspect-ratio:1/1;max-width:520px;justify-self:end;width:100%}
.hero-fondo{position:absolute;inset:0;width:100%;height:100%}
.hero-personaje{position:absolute;left:14%;top:8%;width:74%}
.hero-personaje svg{width:100%;height:auto}
.cifras{list-style:none;padding:0;margin:26px auto 0;display:flex;gap:0;border-top:2px solid var(--linea);border-bottom:2px solid var(--linea)}
.cifras li{flex:1;padding:16px 0;text-align:center;font-size:1rem;color:var(--tinta-suave)}
.cifras li+li{border-left:1.5px dashed var(--gris)}
.cifras b{font:700 1.6rem/1 var(--f-titulo);color:var(--tinta);margin-right:6px}

/* Trío */
.trio{padding:96px 0 20px}
.trio-cab{display:grid;grid-template-columns:200px 1fr;align-items:end;gap:28px;margin-bottom:40px;max-width:900px}
.trio-wiki svg{width:200px;height:auto}
.trio-cab h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:18px}
.trio-cab .bocadillo::before{content:"";position:absolute;left:-15px;top:22px;width:24px;height:24px;background:var(--papel-claro);border-left:var(--borde);border-bottom:var(--borde);transform:rotate(45deg);border-radius:0 0 0 6px}
.piezas{display:grid;grid-template-columns:repeat(12,1fr);gap:26px}
.pieza{position:relative;border:var(--borde);border-radius:var(--r-xl);box-shadow:0 5px 0 var(--sombra-c);overflow:hidden;display:grid;align-items:center}
.pieza h3{font-size:clamp(1.8rem,2.8vw,2.5rem);margin:6px 0 16px}
.pieza h3 a{color:inherit;text-decoration:none}
@media (hover:hover){.pieza h3 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}}
.pieza-num{font:700 .8rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-suave);display:flex;align-items:center;gap:10px}
.pieza-num span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tinta);color:var(--papel);font-size:.8rem;letter-spacing:0}
.pieza .bocadillo.plano{font-size:1.08rem;max-width:30em}
.pieza-accion{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:24px}
.pieza-accion .ruta{color:var(--tinta-suave)}
.pieza-nota{margin-top:14px;font-size:.88rem;opacity:.85}
.pieza-dibujo svg{width:100%;height:auto}
/* 1 · IP: ancho completo, dibujo a la derecha */
.pieza-ip{grid-column:1/-1;grid-template-columns:1fr 1fr;background:var(--papel-claro);padding:44px 52px}
.pieza-ip .pieza-dibujo{order:2}
/* 2 · Velocidad: bloque azul */
.pieza-velocidad{grid-column:1/8;background:var(--pieza-azul);color:#fff;padding:40px 44px;grid-template-columns:1fr}
.pieza-velocidad .pieza-num{color:#F2F8FC}.pieza-velocidad .pieza-num span{background:var(--papel);color:var(--tinta)}
.pieza-velocidad .bocadillo.plano .quien{color:#fff}
.pieza-velocidad .pieza-accion .ruta{color:#F2F8FC}
.pieza-velocidad .pieza-dibujo{background:var(--papel);border:var(--borde);border-radius:var(--r-l);padding:18px 26px 8px;margin-bottom:26px;max-width:460px}
/* 3 · QR: tinte cálido */
.pieza-qr{grid-column:8/-1;background:var(--teja-suave);padding:40px 36px;grid-template-columns:1fr}
.pieza-qr .pieza-dibujo{margin:-8px -6px 18px}

/* ¿Buscas otra cosa? */
.otra{padding:100px 0 30px}
.otra-rejilla{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:center;background:var(--cielo);border-radius:var(--r-xl);padding:48px 56px 52px 24px;position:relative}
.otra-wiki svg{width:290px;height:auto;margin-bottom:-20px}
.otra-wiki .wiki-abajo{display:none}
.otra-panel{min-width:0}
.otra-panel h2{font-size:clamp(2rem,3.4vw,2.8rem);margin-bottom:18px}
.otra-panel .bocadillo{margin-bottom:22px}
.otra-panel .bocadillo::before{content:"";position:absolute;left:-15px;top:22px;width:24px;height:24px;background:var(--papel-claro);border-left:var(--borde);border-bottom:var(--borde);transform:rotate(45deg);border-radius:0 0 0 6px}
.ideas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.ideas span{color:var(--tinta-suave);margin-right:4px}
.ideas button{font:700 .95rem var(--f-texto);padding:8px 14px;border-radius:999px;border:1.5px solid var(--linea);background:var(--papel-claro);color:var(--tinta);cursor:pointer}
@media (hover:hover){.ideas button:hover{background:var(--campo)}}

/* Cierre */
.cierre{padding:80px 0 0}
.cierre-fila{display:grid;grid-template-columns:150px 1fr auto;gap:30px;align-items:center;border-top:2px solid var(--linea);border-bottom:2px solid var(--linea);padding:26px 0}
.cierre-wiki svg{width:150px;height:auto}
.cierre h2{font-size:clamp(1.7rem,2.8vw,2.3rem);margin-bottom:8px}
.cierre p{color:var(--tinta-suave);max-width:36em}

/* Tableta */
@media (max-width:960px){
  .pieza-velocidad,.pieza-qr{grid-column:1/-1}
  .pieza-velocidad{grid-template-columns:1fr 1fr;gap:28px}
  .pieza-velocidad .pieza-dibujo{margin:0}
  .pieza-qr{grid-template-columns:1fr 1fr;gap:28px}
  .cierre-fila{grid-template-columns:120px 1fr}.cierre-fila .boton{grid-column:1/-1;justify-self:start}
  .cierre-wiki svg{width:120px}
}
/* Móvil: la primera pantalla es promesa + buscador + atajos; Wiki pequeño al lado del saludo */
@media (max-width:720px){
  .hero{padding:18px 0 0}
  .hero-rejilla{grid-template-columns:1fr}
  .hero-wiki{display:none}
  .hola{gap:12px;margin-bottom:8px}
  .hola-mini{display:block;width:58px;height:58px}
  .hola-mini .wiki-boton,.hola-mini svg{width:100%;height:100%}
  .hero h1{font-size:2.35rem;margin-bottom:16px}
  .hero-bocadillo{font-size:1rem;padding:13px 16px;margin-bottom:18px}
  .hero-bocadillo::after{display:none}
  .atajos{margin-top:14px}
  .cifras li{font-size:.82rem;padding:12px 4px}.cifras b{display:block;font-size:1.35rem;margin:0 0 2px}
  .trio{padding:56px 0 10px}
  .trio-cab{grid-template-columns:110px 1fr;gap:14px;align-items:start;margin-bottom:26px}
  .trio-wiki svg{width:110px}
  .trio-cab>div:last-child{display:contents}
  .trio-cab h2{font-size:1.8rem;margin-bottom:0;align-self:center}
  .trio-cab .bocadillo{grid-column:1/-1;font-size:1rem;margin-top:4px}
  .trio-cab .bocadillo::before{left:44px;top:-14px;border:0;border-left:var(--borde);border-top:var(--borde)}
  .piezas{gap:20px}
  .pieza,.pieza-ip,.pieza-velocidad,.pieza-qr{grid-template-columns:1fr;padding:26px 22px;border-radius:var(--r-l);gap:0}
  .pieza-ip .pieza-dibujo{order:0;margin:-6px 0 10px}
  .pieza-velocidad .pieza-dibujo{margin-bottom:20px;padding:12px 16px 4px}
  .pieza .bocadillo.plano{font-size:1rem}
  .pieza-accion .ruta{display:none}
  .otra{padding:56px 0 10px}
  .otra-rejilla{grid-template-columns:1fr;padding:26px 20px 30px;border-radius:var(--r-l)}
  .otra-wiki{display:flex;justify-content:flex-start;margin:-6px 0 -10px}
  .otra-wiki .wiki-lado{display:none}.otra-wiki .wiki-abajo{display:block}
  .otra-wiki svg{width:140px;margin:0}
  .otra-panel .bocadillo::before{left:52px;top:-14px;border:0;border-left:var(--borde);border-top:var(--borde)}
  .cierre{padding:50px 0 0}
  .cierre-fila{grid-template-columns:84px 1fr;gap:16px}
  .cierre-wiki svg{width:84px}
  .cierre h2{font-size:1.5rem}
  .cierre p{font-size:.95rem}
}