/* ===========================================================================
   marca.css — lo que comparten las seis páginas de EltioIA.cl
   Variables, tipografía, barra, pie, botones, fichas y filtros.
   Lo propio de los juegos vive en arcade.css, que se carga después.
   =========================================================================== */

:root{
  --tinta:#1B1A3A;
  --papel:#EEF4FF;
  --linea:#C3D6F5;
  --limon:#B8EF3C;
  --azul:#2F5BFF;
  --papaya:#FF6B35;
  --chicle:#FF3D9A;
  --cielo:#22CFE3;

  --papel-alto:#FFFFFF;
  --tenue:#5B6A94;
  --blanco:#FFFFFF;

  --titular:"Bricolage Grotesque","Space Grotesk",system-ui,sans-serif;
  /* nombre viejo de la misma fuente: lo usan arcade.css y portada.css */
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --cuerpo:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --dato:"JetBrains Mono",ui-monospace,monospace;

  --ancho:1180px;
  --radio:18px;
  --borde:3px solid var(--tinta);
}

*{box-sizing:border-box}

/* Sin !important pierde contra cualquier .algo{display:flex} de autor,
   y entonces los filtros y el buscador no esconden nada. */
[hidden]{display:none !important}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--cuerpo);
  color:var(--tinta);
  background:var(--papel);
  background-image:
    linear-gradient(var(--linea) 1px,transparent 1px),
    linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:40px 40px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto}

h1,h2,h3{font-family:var(--titular);letter-spacing:-.03em;line-height:1.1;margin:0}

a{color:inherit}

.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 20px 80px}

/* --- accesibilidad: saltar al contenido --- */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--tinta);color:var(--blanco);padding:10px 16px;border-radius:0 0 12px 0;
}
.saltar:focus{left:0}

:where(a,button,input,summary):focus-visible{
  outline:3px solid var(--azul);outline-offset:3px;border-radius:6px;
}

/* ===========================  BARRA  ===================================== */

.barra{
  position:sticky;top:0;z-index:30;isolation:isolate;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:var(--ancho);margin:0 auto;padding:14px 20px;
  /* Transparente a proposito: la cuadricula del papel tiene que verse por
     detras del logo y del menu. Solo se vuelve solida al bajar, cuando hay
     contenido pasando por abajo y el texto necesita fondo. */
  background:transparent;
  border-bottom:2px solid transparent;
  transition:background .2s ease,border-color .2s ease,backdrop-filter .2s ease;
}
/* La banda verde va siempre, cruza toda la pantalla (el ::before se estira
   al ancho de la ventana, porque la barra vive dentro del envoltorio de
   1180 px) y lleva una línea navy abajo que la enmarca. */
.barra::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:var(--tinta);z-index:-1;
  border-bottom:4px solid var(--limon);
  box-shadow:0 10px 24px -14px rgba(27,26,58,.6);
}
/* Sobre navy, el logo y el nombre van en blanco; el botón cambia su sombra a cian. */
.barra .marca span{color:#FFFFFF}
.barra .marca-logo line,.barra .marca-logo circle,.barra .marca-logo path{stroke:#FFFFFF}
.barra .hablemos{box-shadow:5px 5px 0 var(--cielo);border-color:var(--tinta)}
.barra .hablemos:hover{box-shadow:7px 7px 0 var(--cielo)}
.barra .hablemos:active{box-shadow:2px 2px 0 var(--cielo)}
.barra.pegada{background:transparent}

.marca{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;font-family:var(--titular);font-weight:800;font-size:1.12rem;
  letter-spacing:-.03em;flex:0 0 auto;
}
.marca img{display:block;width:34px;height:34px}

.menu{display:flex;gap:18px;flex-wrap:nowrap;margin:0 auto}
.menu a{
  text-decoration:none;font-weight:700;font-size:.98rem;
  letter-spacing:-.01em;color:#EAF0FF;
  padding:8px 15px;border-radius:999px;border:2px solid transparent;
  transition:color .15s,background .15s,border-color .15s,transform .15s;
}
.menu a:hover{color:#FFFFFF;border-color:var(--limon);transform:translateY(-1px)}
.menu a[aria-current="page"]{background:var(--limon);color:var(--tinta);border-color:var(--limon)}
.menu a[aria-current="page"]:hover{transform:none}

/* Sub-pestañas: las secciones que viven dentro de Recursos. */
.subpestanas{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 -28px}
.subpestanas a{
  font:700 .9rem/1 var(--cuerpo);text-decoration:none;color:var(--tinta);
  padding:9px 16px;border-radius:999px;background:var(--papel-alto);border:2px solid var(--tinta);
  transition:background .15s,transform .1s,box-shadow .15s;
}
.subpestanas a:hover{background:var(--limon);transform:translateY(-2px);box-shadow:3px 3px 0 var(--tinta)}
.subpestanas a[aria-current="page"]{background:var(--tinta);color:var(--papel)}

/* El boton de contacto: el unico relleno de la barra, para que se note. */
.hablemos{
  flex:none;display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;
  font-family:var(--titular);font-weight:800;font-size:1rem;letter-spacing:-.02em;
  padding:12px 22px;border-radius:999px;
  background:var(--limon);color:var(--tinta);
  border:var(--borde);box-shadow:5px 5px 0 var(--tinta);
  transition:transform .12s,box-shadow .12s;
}
.hablemos span{transition:transform .2s}
.hablemos:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--tinta)}
.hablemos:hover span{transform:translateX(4px)}
.hablemos:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinta)}

/* ===========================  TÍTULOS DE SECCIÓN  ======================== */

.seccion-titulo{
  display:flex;align-items:flex-end;gap:28px;
  padding:52px 0 26px;
}
.seccion-titulo > div{max-width:62ch;flex:1 1 auto}

/* EN ESPERA — el personaje está fuera de la página mientras se corrige.
   El estilo se queda: volver a ponerlo es agregar una línea de HTML,
   <img class="anfitrion" src="personajes/v2/tioia/poses/tioia-XXX.png" alt="">
   dentro de <section class="seccion-titulo">, después del <div>. */
.anfitrion{
  flex:none;width:clamp(120px,15vw,186px);height:auto;display:block;
  align-self:flex-end;margin-bottom:-26px;
  filter:drop-shadow(5px 5px 0 rgba(47,91,255,.18));
}
@media (max-width:760px){ .anfitrion{display:none} }
.seccion-titulo h2{font-size:clamp(2rem,5vw,3.1rem);font-weight:800}
.seccion-titulo p{margin:.6em 0 0;font-size:1.04rem;color:var(--tenue)}

/* ===========================  FILTROS  =================================== */

.filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:24px}

.chip{
  font:500 .86rem/1 var(--cuerpo);
  padding:9px 15px;border-radius:999px;cursor:pointer;
  background:var(--blanco);color:var(--tinta);
  border:2px solid var(--tinta);
  transition:background .15s,color .15s,transform .1s;
}
.chip:hover{transform:translateY(-2px);background:var(--limon);border-color:var(--tinta);box-shadow:3px 3px 0 var(--tinta)}
.chip.activo,
.chip[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}

.buscador{
  flex:1 1 180px;min-width:150px;max-width:280px;
  font:400 .9rem/1 var(--cuerpo);
  padding:10px 14px;border-radius:999px;
  background:var(--blanco);color:var(--tinta);
  border:2px solid var(--linea);
}
.buscador::placeholder{color:var(--tenue)}
.buscador:focus{border-color:var(--tinta);outline:none}

/* ===========================  REJILLA Y FICHA  =========================== */

.rejilla{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  align-items:stretch;
}

.ficha{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--blanco);
  border:var(--borde);border-radius:var(--radio);
  /* el margen de arriba deja caer la insignia fuera de la esquina */
  margin-top:20px;
  padding:26px 18px 18px;
  box-shadow:6px 6px 0 var(--tinta);
  transition:transform .12s,box-shadow .12s;
}
.ficha:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--tinta)}

.ficha .etiqueta{
  margin:0 0 6px;font-family:var(--dato);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);
}
.ficha h3{font-size:1.14rem;font-weight:800;margin:0 0 8px}
.ficha .bajada{margin:0 0 12px;font-size:.92rem;color:#3A4668}

.ficha .datos{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.ficha .datos span{
  font-family:var(--dato);font-size:.68rem;letter-spacing:.06em;
  padding:4px 9px;border-radius:999px;
  background:var(--papel);border:1.5px solid var(--linea);color:var(--tenue);
}

.ficha .nota{
  margin:0 0 14px;padding:10px 12px;
  border-left:4px solid var(--limon);border-radius:0 10px 10px 0;
  background:#F7FBEA;
  font-size:.86rem;font-style:italic;color:#3A4668;
}

/* El botón se pega abajo para que todas las fichas de una fila terminen parejas. */
.ficha .boton,.ficha .boton-claro{margin-top:auto;align-self:flex-start}

/* ===========================  BOTONES  =================================== */

.boton,.boton-claro{
  display:inline-block;
  font:700 .92rem/1 var(--cuerpo);
  padding:11px 18px;border-radius:999px;
  text-decoration:none;cursor:pointer;
  border:2px solid var(--tinta);
  transition:transform .1s,box-shadow .1s;
}
.boton{background:var(--limon);color:var(--tinta);box-shadow:3px 3px 0 var(--tinta)}
.boton-claro{background:var(--blanco);color:var(--tinta)}
.boton:hover,.boton-claro:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tinta)}
.boton:active,.boton-claro:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--tinta)}

/* ===========================  VACÍO  ===================================== */

.vacio{
  margin:28px 0;padding:34px 24px;
  text-align:center;color:var(--tenue);font-size:.98rem;
  background:var(--blanco);
  border:2px dashed var(--linea);border-radius:var(--radio);
}

/* ===========================  PIE  ======================================= */

.pie{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  max-width:var(--ancho);margin:0 auto;padding:26px 20px 44px;
  border-top:2px solid var(--linea);
  font-size:.88rem;color:var(--tenue);
}
.pie a{text-decoration:none;font-weight:700;color:var(--tinta)}
.pie a:hover{box-shadow:inset 0 -3px 0 var(--limon)}
.pie span{margin-left:auto;font-family:var(--dato);font-size:.74rem;letter-spacing:.1em}

/* ===========================  ANGOSTO  =================================== */

@media (max-width:860px){
  .barra{gap:12px;padding:10px 16px}
  .menu{order:3;margin:0;width:100%;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap;font-size:.92rem;padding:7px 12px}
  .subpestanas{margin-top:18px}
  .hablemos{margin-left:auto;padding:10px 16px;font-size:.92rem;box-shadow:4px 4px 0 var(--tinta)}
  .marca{font-size:1.2rem;gap:10px}
  .marca-logo{width:46px}
}

@media (max-width:620px){
  .envoltorio{padding:0 16px 60px}
  .seccion-titulo{padding:34px 0 20px}
  .rejilla{grid-template-columns:1fr}
  .pie{padding:22px 16px 36px}
  .pie span{margin-left:0;width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ===========================  PROMPT  ==================================== */
/* Solo lo usa la sección "Usar IA", pero vive acá porque la ficha es de marca.css. */

.ficha .prompt{
  margin:0 0 8px; padding:13px 15px; border-radius:12px;
  background:var(--tinta); color:#EAF0FF;
  font-family:var(--dato); font-size:.78rem; line-height:1.6;
  white-space:pre-wrap; word-break:break-word;
  max-height:190px; overflow:auto;
}
.ficha .herramienta{
  margin:0 0 14px; font-family:var(--dato); font-size:.68rem;
  letter-spacing:.06em; color:var(--tenue);
}

/* Recurso anunciado pero todavia sin archivo. Decir "Pronto" es mas honesto
   que un boton que abre una pestana en blanco. */
.ficha .boton-pronto{
  margin-top:auto; align-self:flex-start;
  display:inline-block; font:700 .92rem/1 var(--cuerpo);
  padding:11px 18px; border-radius:999px;
  background:var(--papel); color:var(--tenue);
  border:2px dashed var(--linea); cursor:default;
}

/* ===========================  LOGO  ====================================== */
/* El bocadillo con antena y las letras IA: el tío que explica, no el aparato
   que calcula. Vuelve de v1, donde se veía mejor que la mascota chica. */

.marca{
  display:flex;align-items:center;gap:13px;text-decoration:none;
  font-family:var(--titular);font-weight:800;letter-spacing:-.032em;
  font-size:clamp(1.35rem,2.6vw,1.7rem);
}
.marca-logo{
  flex:none;width:clamp(52px,7vw,68px);height:auto;display:block;
  filter:drop-shadow(4px 4px 0 var(--azul));
  transition:transform .35s cubic-bezier(.2,1.4,.4,1),filter .35s ease;
}
.marca:hover .marca-logo{transform:rotate(-4deg) scale(1.05);filter:drop-shadow(6px 6px 0 var(--azul))}

.barra-nota{
  margin-left:auto;font-family:var(--dato);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--tenue);
}

/* ===========================  INSIGNIA  ================================== */
/* El número en la esquina, medio afuera de la tarjeta. De la referencia que
   mandaste: cuadrado redondeado, borde grueso, y se turna de color. */

.ficha .insignia{
  position:absolute;top:-20px;left:-12px;
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:14px;
  font-family:var(--titular);font-weight:800;font-size:1.06rem;
  letter-spacing:-.04em;color:var(--tinta);
  border:var(--borde);
}
.ficha .insignia.limon {background:var(--limon)}
.ficha .insignia.cielo {background:var(--cielo)}
.ficha .insignia.chicle{background:var(--chicle);color:var(--blanco)}
.ficha .insignia.papaya{background:var(--papaya);color:var(--blanco)}

/* Las píldoras bajan al pie de la ficha, sobre el botón. */
.ficha .datos{margin:0 0 14px;margin-top:auto;padding-top:14px}
.ficha .datos + .boton,
.ficha .datos + .boton-pronto{margin-top:0}
.ficha .nota{margin-bottom:0}
.ficha .nota + .datos{margin-top:14px}

/* EN ESPERA — igual que .anfitrion: el estilo queda listo para cuando vuelva. */
.vacio{display:flex;flex-direction:column;align-items:center;gap:6px}
.vacio img{width:118px;height:auto;display:block;opacity:.92}

/* ===========================  NUESTRO OBJETIVO  ========================== */

.objetivo{margin:78px 0 20px;padding-top:56px;border-top:3px solid var(--tinta)}

.objetivo-texto{max-width:60ch}
.antetitulo-objetivo{
  margin:0 0 10px;font-family:var(--dato);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--azul);
}
.objetivo h2{font-size:clamp(1.8rem,4vw,2.9rem);font-weight:800;line-height:1.08}
.objetivo-texto > p{margin:16px 0 0;font-size:1.04rem;color:var(--tenue)}

.objetivo-tres{
  display:grid;gap:20px;margin:34px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.objetivo-tres article{
  background:var(--blanco);border:var(--borde);border-radius:var(--radio);
  padding:22px 20px;box-shadow:6px 6px 0 var(--tinta);
}
.objetivo-tres .num{
  display:inline-block;margin-bottom:12px;padding:4px 11px;border-radius:999px;
  font-family:var(--dato);font-size:.72rem;letter-spacing:.1em;
  background:var(--limon);border:2px solid var(--tinta);
}
.objetivo-tres h3{font-size:1.2rem;font-weight:800;margin:0 0 8px}
.objetivo-tres p{margin:0;font-size:.93rem;color:#3A4668}

.objetivo-remate{
  max-width:62ch;margin:30px 0 0;padding:18px 22px;
  border-left:6px solid var(--limon);border-radius:0 14px 14px 0;
  background:var(--blanco);
  font-size:1.02rem;font-weight:500;
}

@media (max-width:620px){
  .objetivo{margin-top:52px;padding-top:40px}
  .objetivo h2 br{display:none}
}


/* ===========================  VUELVE PRONTO  ============================= */
.vuelve-pronto{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 30px;align-items:center;
  margin:8px 0 40px;padding:26px 30px;
  background:var(--tinta);color:var(--papel);
  border:var(--borde);border-radius:26px;box-shadow:10px 10px 0 var(--limon);
  overflow:hidden;position:relative;
}
.vuelve-pronto img{width:clamp(120px,16vw,180px);height:auto;display:block;animation:bip-flota 4s ease-in-out infinite}
.vuelve-pronto .rot{margin:0 0 6px;font-family:var(--dato);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--limon)}
.vuelve-pronto h3{font-family:var(--titular);font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:800;letter-spacing:-.03em;margin:0 0 10px;line-height:1.05}
.vuelve-pronto p{margin:0 0 18px;color:#C9D4F0;max-width:56ch;line-height:1.55}
.vuelve-pronto .boton{display:inline-flex;align-items:center;gap:9px;font-family:var(--titular);font-weight:800;font-size:1rem;padding:13px 22px;border-radius:999px;background:var(--limon);color:var(--tinta);text-decoration:none;border:var(--borde);box-shadow:5px 5px 0 var(--cielo);transition:transform .14s,box-shadow .14s,background .14s}
.vuelve-pronto .boton:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--cielo);background:var(--cielo)}
.vuelve-pronto .boton:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--cielo)}
@keyframes bip-flota{50%{transform:translateY(-8px) rotate(-2deg)}}
@media (max-width:640px){.vuelve-pronto{grid-template-columns:1fr;text-align:center}.vuelve-pronto img{margin:0 auto}.vuelve-pronto p{margin-left:auto;margin-right:auto}}
@media (prefers-reduced-motion:reduce){.vuelve-pronto img{animation:none}}