/* ============================================================
   Krumlab: test de ADN de marca.
   Hereda paleta y tipografías de site.css. Una pantalla a la vez, con el
   contenido centrado y sin nada más que compita por la atención.
   ============================================================ */

.adn-body{background:var(--gray-light)}
.adn-main{max-width:760px;margin:0 auto;padding:8.5rem 5% 6rem;min-height:100svh}

/* Progreso */
.adn-progreso{position:fixed;top:0;left:0;right:0;height:3px;background:var(--gray-mid);z-index:210}
.adn-progreso span{display:block;height:100%;width:0;background:var(--green);transition:width .45s cubic-bezier(.22,1,.36,1)}
.adn-paso{font-family:var(--fd);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:1.5rem;min-height:1rem}

/* Cada pantalla entra desde abajo: se nota que avanzas */
.adn-lienzo{position:relative}
html.js .adn-pantalla,html.js .adn-portada{animation:adnEntra .42s cubic-bezier(.22,1,.36,1) both}
html.js.reduced .adn-pantalla,html.js.reduced .adn-portada{animation:none}
@keyframes adnEntra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Portada */
.adn-portada{text-align:center;padding:3rem 0}
.adn-portada h1{font-family:var(--fd);font-size:clamp(2.3rem,6vw,3.8rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:1.25rem}
.adn-portada h1 em{font-style:normal;color:var(--green-darker)}
.adn-intro{font-size:1.02rem;color:var(--gray);font-weight:300;line-height:1.8;max-width:480px;margin:0 auto 2.5rem}
.adn-eyebrow{font-family:var(--fd);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green-darker);margin-bottom:1rem}

/* Pantalla */
.adn-pantalla h2{font-family:var(--fd);font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;line-height:1.2;letter-spacing:-.02em;margin-bottom:.6rem}
.adn-sub{font-size:1rem;color:var(--gray);font-weight:300;line-height:1.75;margin-bottom:2.25rem;max-width:520px}
.adn-nota{font-size:.85rem;color:var(--gray);font-weight:300;line-height:1.7;margin-bottom:1.25rem}
.adn-aviso{font-size:.82rem;color:var(--gray);font-weight:500;margin-top:1.5rem}

/* Opciones grandes */
.adn-opciones{display:grid;gap:.75rem;margin-bottom:1.75rem}
.adn-opcion{display:flex;flex-direction:column;gap:.25rem;text-align:left;padding:1.15rem 1.35rem;background:var(--white);border:1.5px solid var(--gray-mid);border-radius:14px;cursor:pointer;font:inherit;transition:border-color .2s,transform .2s}
.adn-opcion:hover{border-color:var(--green-dark);transform:translateY(-2px)}
.adn-opcion.elegida{border-color:var(--black);background:var(--black);color:var(--white)}
.adn-opcion strong{font-family:var(--fd);font-size:1rem;font-weight:700}
.adn-opcion span{font-size:.84rem;opacity:.7;font-weight:300}

/* Campos */
.adn-campo{display:block;margin-bottom:1.25rem}
.adn-campo>span{display:block;font-size:.8rem;font-weight:600;color:var(--black);margin-bottom:.5rem}
.adn-campo input{width:100%;padding:.85rem 1rem;font:inherit;font-size:.95rem;border:1.5px solid var(--gray-mid);border-radius:10px;background:var(--white);transition:border-color .2s}
.adn-campo input:focus{outline:none;border-color:var(--black)}
.adn-campo-corto{max-width:130px}
.adn-frase{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-family:var(--fd);font-size:1.25rem;font-weight:700;margin-bottom:1rem}
.adn-frase input{flex:1 1 220px;padding:.55rem .85rem;font:inherit;font-size:1.15rem;border:0;border-bottom:2px solid var(--green);border-radius:0;background:transparent}
.adn-frase input:focus{outline:none;border-bottom-color:var(--black)}

/* Palabras semilla como etiquetas, al modo del campo de destinatarios de un
   correo: la caja entera se comporta como un campo y las palabras cerradas
   quedan dentro como piezas sueltas. */
.adn-etiquetas{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;min-height:56px;padding:.6rem .75rem;background:var(--white);border:1.5px solid var(--gray-mid);border-radius:14px;cursor:text;transition:border-color .2s}
.adn-etiquetas:focus-within{border-color:var(--black)}
.adn-etiqueta{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .6rem .34rem .75rem;background:var(--green);color:var(--black);border-radius:999px;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s}
.adn-etiqueta:hover{background:var(--green-dark)}
.adn-etiqueta i{font-style:normal;font-size:1.05rem;line-height:1;opacity:.55}
.adn-etiqueta:hover i{opacity:1}
.adn-etiquetas input{flex:1 1 130px;min-width:130px;border:0;outline:none;background:transparent;font:inherit;font-size:1.02rem;padding:.3rem 0}
.adn-pista{font-size:.8rem;color:var(--gray);margin-top:.5rem}

/* Letras y el boton de generar, en la misma linea */
.adn-fila{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem;margin:1.5rem 0}
.adn-fila .adn-campo{margin:0}
.adn-resultados{margin:1.5rem 0}
.adn-resultados .adn-btn-sec{margin-top:1rem}
.adn-nombre.elegida{background:var(--black);color:var(--white);border-color:var(--black)}

/* Naming */
.adn-nombres{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.5rem}
.adn-nombres .adn-nota{flex:1 0 100%;margin:0 0 .5rem}
.adn-nombre{font-family:var(--fd);font-size:1rem;font-weight:700;padding:.5rem 1rem;background:var(--white);border:1.5px solid var(--gray-mid);border-radius:100px;cursor:pointer;transition:all .2s}
.adn-nombre:hover{border-color:var(--green-dark);transform:translateY(-2px)}

/* Preguntas */
/* Preguntas: solo hay una en pantalla, asi que puede ocupar el sitio que
   ocuparia un titulo en vez de leerse como letra menuda de formulario. */
.adn-pregunta{border:0;margin:0;padding:0}
.adn-pregunta legend{font-family:var(--fd);font-size:clamp(1.4rem,3.6vw,1.95rem);font-weight:700;line-height:1.28;margin-bottom:1.6rem;max-width:620px}
.adn-radio{display:flex;align-items:flex-start;gap:.85rem;padding:1.05rem 1.3rem;margin-bottom:.65rem;background:var(--white);border:1.5px solid var(--gray-mid);border-radius:14px;cursor:pointer;font-size:clamp(1.04rem,2.2vw,1.1rem);line-height:1.55;transition:border-color .2s,transform .2s}
.adn-radio:hover{border-color:var(--green-dark);transform:translateY(-1px)}
.adn-radio.elegida{border-color:var(--black);background:var(--black);color:var(--white)}
.adn-radio input{margin-top:.4rem;flex:0 0 auto;accent-color:var(--green-darker)}

/* Paso de una pregunta a la siguiente */
.adn-cambio{animation:adn-entra .4s cubic-bezier(.22,1,.36,1) both}
.adn-cambio.atras{animation-name:adn-entra-atras}
.adn-cambio.sale{animation:adn-sale .16s ease-in forwards}
@keyframes adn-entra{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes adn-entra-atras{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes adn-sale{to{opacity:0;transform:translateX(-28px)}}
@media(prefers-reduced-motion:reduce){.adn-cambio,.adn-cambio.atras,.adn-cambio.sale{animation:none}}

/* Revelación del arquetipo */
.adn-revelacion{font-size:clamp(2.2rem,7vw,3.6rem);color:var(--black);margin-bottom:.4rem}
.adn-motivacion{font-size:.95rem;color:var(--gray);font-weight:300;line-height:1.7}
.adn-fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:2rem 0}
.adn-fichas>div{background:var(--white);border:1.5px solid var(--gray-mid);border-radius:12px;padding:1.1rem 1.25rem}
.adn-fichas span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:.35rem}
.adn-fichas strong{font-family:var(--fd);font-size:.95rem;font-weight:700}
.adn-detalle{margin:1.5rem 0 0}
.adn-detalle summary{font-size:.85rem;font-weight:600;color:var(--green-darker);cursor:pointer;padding:.5rem 0}
.adn-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem;margin-top:1rem}
.adn-arq{text-align:left;padding:.85rem 1rem;background:var(--white);border:1.5px solid var(--gray-mid);border-radius:11px;cursor:pointer;font:inherit;transition:border-color .2s}
.adn-arq:hover{border-color:var(--green-dark)}
.adn-arq.elegida{border-color:var(--black);background:var(--black);color:var(--white)}
.adn-arq strong{display:block;font-family:var(--fd);font-size:.9rem;font-weight:700}
.adn-arq span{font-size:.76rem;opacity:.7;font-weight:300;line-height:1.4}

/* Nubes de fichas */
.adn-nube{display:flex;flex-wrap:wrap;gap:.5rem}
.adn-nube-corta{margin-top:.5rem}
.adn-chip{font-size:.87rem;font-weight:600;padding:.55rem 1.05rem;background:var(--white);border:1.5px solid var(--gray-mid);border-radius:100px;cursor:pointer;font-family:inherit;transition:all .2s}
.adn-chip:hover{border-color:var(--green-dark);transform:translateY(-2px)}
.adn-chip.elegida{background:var(--black);border-color:var(--black);color:var(--white)}
.adn-eje{border:0;margin-bottom:1.75rem}
.adn-eje legend{font-family:var(--fd);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:.7rem}
.adn-eje legend span{opacity:.5}
.adn-escala{display:flex;flex-wrap:wrap;gap:.45rem}

/* Ficha final */
.adn-ficha{background:var(--white);border:1.5px solid var(--gray-mid);border-radius:20px;padding:clamp(1.75rem,5vw,3rem)}
.adn-ficha-cab{border-bottom:1.5px solid var(--gray-mid);padding-bottom:1.75rem;margin-bottom:2rem}
.adn-ficha-cab h2{margin-bottom:.5rem}
.adn-promesa{font-size:1rem;color:var(--gray);font-weight:300;line-height:1.7}
/* site.css declara section{padding:6.5rem 5%} para las landings. Dentro de la
   ficha eran 104px arriba y abajo por seccion, 832px de vacio para 107
   palabras: el hueco de contenido se veia, literalmente, como huecos. */
.adn-ficha section:not(.adn-tension){padding:0}
.adn-ficha section{margin-bottom:2.5rem}
.adn-ficha section:last-of-type{margin-bottom:0}

/* La revelacion manda: el arquetipo es la respuesta del test y el nombre de la
   marca es un dato que la persona ya traia de casa. */
.adn-ficha .adn-revelacion-ficha{font-family:var(--fd);font-size:clamp(2.6rem,7vw,4rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin-bottom:.5rem}
.adn-ficha-firma{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;font-size:.9rem;color:var(--gray);margin-bottom:.35rem}
.adn-ficha-firma strong{font-family:var(--fd);font-size:1.05rem;font-weight:800;color:var(--black);letter-spacing:-.01em}
/* El cierre no se deja al azar: pedian 556px en 551 y se partian donde tocase.
   Las dos acciones que la persona quiere van arriba y a la par, y copiar el
   texto baja a enlace, que es lo que es. */
.adn-ficha .adn-acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem;margin-top:2rem}
.adn-ficha .adn-acciones .adn-btn{width:100%;justify-content:center}
.adn-ficha .adn-cierre{font-size:.95rem;color:var(--gray);line-height:1.7;margin-top:2.5rem}
.adn-ficha .adn-copiar{grid-column:1/-1;justify-self:start;background:none;border:0;padding:.35rem 0;font:inherit;font-size:.85rem;font-weight:600;color:var(--gray);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.adn-ficha .adn-copiar:hover{color:var(--black)}

.adn-ficha-pie{display:flex;align-items:center;gap:.5rem;margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--gray-mid);font-size:.78rem;color:var(--gray)}
.adn-ficha-pie svg{height:15px;width:auto}
.adn-ficha h3{font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:.7rem}
.adn-grande{font-family:var(--fd);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.adn-ejes-resumen{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1rem}
.adn-ejes-resumen>div{background:var(--gray-light);border-radius:10px;padding:.85rem 1rem}
.adn-ejes-resumen span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:.25rem}
.adn-ejes-resumen strong{font-family:var(--fd);font-size:.95rem;font-weight:700}
.adn-reglas{list-style:none;counter-reset:regla;display:flex;flex-direction:column;gap:1.25rem}
.adn-reglas li{counter-increment:regla;padding-left:2.1rem;position:relative}
.adn-reglas li::before{content:counter(regla);position:absolute;left:0;top:0;width:24px;height:24px;background:var(--green);color:var(--black);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.75rem;font-weight:800}
.adn-reglas p{font-size:1.02rem;line-height:1.6;font-weight:500}
.adn-ejemplo{display:flex;flex-direction:column;gap:.3rem;margin-top:.6rem;font-size:.83rem;font-weight:300;line-height:1.55}
.adn-ejemplo .si{color:var(--green-darker)}
.adn-ejemplo .no{color:var(--gray);text-decoration:line-through;text-decoration-color:var(--gray-mid)}
.adn-tension{background:#fdf6e8;border:1px solid #f0e2c4;border-radius:14px;padding:1.5rem}
.adn-tension h3{color:#8a6d2f}
.adn-tension p{font-size:.9rem;line-height:1.7;font-weight:300}

/* Botones y pie de pantalla */
.adn-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.9rem;font-family:var(--fb);font-size:.9rem;font-weight:600;background:var(--black);color:var(--white);border:1.5px solid var(--black);border-radius:100px;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,opacity .2s;line-height:1.45}
.adn-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 26px rgba(33,33,33,.18)}
.adn-btn:disabled{opacity:.35;cursor:not-allowed}
.adn-btn-sec{background:transparent;color:var(--black);border-color:var(--gray-mid)}
.adn-btn-sec:hover{border-color:var(--black)}
.adn-acciones{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.adn-pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2.5rem;padding-top:1.75rem;border-top:1.5px solid var(--gray-mid)}

/* Impresión: la ficha es lo que se enseña, el resto sobra */
@media print{
  nav,footer,.adn-progreso,.adn-paso,.adn-no-imprimir{display:none !important}
  .adn-body{background:#fff}
  .adn-main{padding:0;max-width:none}
  .adn-ficha{border:0;padding:0}
  .adn-ficha section:not(.adn-tension){padding:0}
  .adn-ficha h3{break-after:avoid}
  @page{margin:14mm}
  /* El credito ya es un elemento de verdad, .adn-ficha-pie, y sale tambien en
     pantalla. Duplicarlo aqui lo imprimiria dos veces. */
  .adn-reglas li{break-inside:avoid}
}

@media(max-width:600px){
  .adn-main{padding:7rem 5% 4rem}
  .adn-pie{flex-direction:column-reverse;gap:.6rem}
  .adn-pie .adn-btn{width:100%}
  .adn-frase{font-size:1.05rem}
}