/* ============================================================================
   Scriba — añadidos propios sobre el Hilos Design System
   ---------------------------------------------------------------------------
   Regla: acá NO se redefine ningún token del DS ni se inventa un color, radio
   o duración. Todo lo de abajo usa los nombres que ya existen en styles.css.
   Lo único nuevo son piezas que el DS no trae porque son de esta página:
   la luz blanca del coyote, el coyote viajero, el mapa de secciones y el
   marco de producto.
   ========================================================================== */

/* ── Base de página ───────────────────────────────────────────────────────── */
/* El bundle del DS no toca el margen del body (asume un root de app). Sin esto
   queda una franja blanca de 8px alrededor de todo el papel. */

:root{
  --moment-mint:#cbebd3;
  --moment-mint-ink:#11361c;
}

html{background:var(--paper);}
body{margin:0;background:var(--paper);}
img{max-width:100%;}

/* ── El gentío: monocromo de fondo, color al pasar por encima ─────────────── */
/* El filtro no es decorativo, cada término hace un trabajo medido. El arte trae
   acentos pastel (`fill="#f5df8d"` y parientes): con grayscale solo, esos
   acentos caen a GRIS MEDIO y el gentío lee sucio — hilos no tiene un solo gris,
   es blanco y negro puro. El brightness los clampea a 255 y el contrast hunde el
   trazo #10100c a 0. Resultado: cuerpo blanco, trazo negro, cero grises. */
.hl-crowd-figure{
  filter:grayscale(1) brightness(1.45) contrast(1.6);
}
/* Un sexto del gentío va a tinta plena, invertido. Es lo que le faltaba al fondo
   para pesar como el de hilos: allá hay masas negras sólidas repartidas entre el
   contorno (pingüinos, manchas, cuerpos oscuros) y son ellas las que dan la
   densidad. Invertir un bicho ya blanqueado da exactamente esa lectura — cuerpo
   negro, detalle interno en blanco, contorno recortado contra el papel. */
.hl-crowd-figure.sc-tinta{
  filter:grayscale(1) brightness(1.45) contrast(1.6) invert(1);
}
/* La mascota (perezoso HDR) no lleva NINGÚN filtro: es un PNG con perfil
   Rec. ITU-R BT.2100 PQ + cICP 9/16/0/1 (dos tintas #ffffff/#141510 medidas
   de hilos-character-hdr.png) y un filter lo tone-mapea y le mata el brillo. */
.sc-hero-coyote img{filter:none;}
.sc-traveler-coyote{filter:none;}
/* La sacudida usa `rotate`, no `transform`: crowd.js escribe el transform
   inline (posición, escala, espejo) y una animación sobre esa propiedad se lo
   borraría. Es el mismo truco que el DS usa en .hl-poke. */
.hl-crowd-figure.sc-on{
  filter:none;
  animation:sc-sway 900ms var(--ease-in-out) infinite;
}
@keyframes sc-sway{
  0%,100%{rotate:-3.5deg;}
  50%    {rotate:3.5deg;}
}
/* El clic manda sobre el balanceo: sin esto, scriba.css carga después del DS
   y el vaivén se comería el .hl-poke justo cuando lo tocan. */
.hl-crowd-figure.sc-on.hl-poke{animation:hl-crowd-poke 420ms var(--ease-out);}
@media (prefers-reduced-motion:reduce){
  .hl-crowd-figure.sc-on{animation:none;}
}

/* ── El coyote del hero ───────────────────────────────────────────────────── */
.sc-hero-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
/* El copiloto vive DENTRO de la tarjeta, arriba del eyebrow: su relleno blanco
   se apoya sobre papel, no sobre el gentío. */
.sc-hero-coyote{
  position:relative;
  z-index:2;
  display:block;
  /* El perezoso es cuerpo entero (como el lobo de hilos), no busto: el marco
     sube para que la figura tenga la misma presencia que antes. */
  width:clamp(6.5rem,15vw,9.5rem);
  margin:0 auto .5rem;
}
/* Sin disco ni halo detrás: el coyote se apoya directo sobre el papel, igual
   que el lobo de "One room, the whole loop." en hilos. Lo que lo despega del
   fondo es su propio relleno blanco (ver el filtro de arriba). */
.sc-hero-coyote img{
  position:relative;
  display:block;
  width:100%;
  height:auto;
}

/* ── El coyote que viaja por toda la página ───────────────────────────────── */
/* Posición fija: el scroll lo empuja de lado a lado (ver mountTraveler).
   El clic lo abre el copiloto del prospecto; la burbuja de oficio no intercepta. */

.sc-traveler{
  position:fixed;
  bottom:1.25rem;
  left:50%;
  z-index:40;
  width:clamp(3.5rem,7vw,5.25rem);
  pointer-events:none;
  opacity:0;
  transition:opacity var(--duration-slow) var(--ease-out);
  will-change:left,transform,opacity;
}
.sc-traveler-talk{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
}
.sc-traveler-hint{
  position:absolute;
  left:50%;
  bottom:92%;
  transform:translateX(-50%);
  padding:.2rem .5rem;
  border-radius:var(--radius-pill);
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}
.sc-traveler:hover .sc-traveler-hint,
.sc-traveler-talk:focus-visible + .sc-traveler-hint,
.sc-traveler:focus-within .sc-traveler-hint{opacity:1;}
@media (max-width:640px){
  .sc-traveler-hint{opacity:1;bottom:100%;margin-bottom:.2rem;}
}
html[data-amigo] .sc-traveler{opacity:0!important;pointer-events:none;}
.sc-traveler-coyote{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  transform-origin:50% 60%;
}
/* Camina de puesto en puesto: el CSS interpola el desplazamiento y el JS solo
   dice a qué puesto va (ver mountTraveler). Las poses animan `rotate` y
   `translate` sueltos porque el `transform` lo ocupa el espejo del bicho. */
.sc-traveler{transition:opacity var(--duration-slow) var(--ease-out),
                        left 900ms var(--ease-in-out);}
.sc-traveler.sc-walk .sc-traveler-coyote{animation:sc-trote 380ms var(--ease-in-out) infinite;}
@keyframes sc-trote{
  0%,100%{translate:0 0;    rotate:-4deg;}
  50%    {translate:0 -7px; rotate:4deg;}
}
/* Trabajando: el cuerpo cabecea sobre la tarea y el objeto se mueve en la mano
   (teclear va rápido y a saltos; revisar, lento y de lado a lado). */
.sc-traveler.sc-work .sc-traveler-coyote{animation:sc-cabecea 1.1s var(--ease-in-out) infinite;}
@keyframes sc-cabecea{
  0%,100%{translate:0 0;    rotate:0deg;}
  50%    {translate:0 -2px; rotate:-5deg;}
}
.sc-traveler.sc-work[data-verb="teclea"] .sc-traveler-prop{animation:sc-teclea 220ms steps(2,end) infinite;}
@keyframes sc-teclea{0%{rotate:-7deg;}100%{rotate:7deg;}}
.sc-traveler.sc-work[data-verb="revisa"] .sc-traveler-prop{animation:sc-revisa 1.6s var(--ease-in-out) infinite;}
@keyframes sc-revisa{
  0%,100%{translate:0 0;   rotate:-3deg;}
  50%    {translate:3px 0; rotate:3deg;}
}
/* Cerrada la tarea: brinco corto y el ✓ que aparece en la burbuja. */
.sc-traveler.sc-done .sc-traveler-coyote{animation:sc-salto 620ms var(--ease-out);}
@keyframes sc-salto{
  0%  {translate:0 0;    rotate:0deg;}
  30% {translate:0 -20px;rotate:-9deg;}
  60% {translate:0 0;    rotate:3deg;}
  80% {translate:0 -6px; rotate:0deg;}
  100%{translate:0 0;    rotate:0deg;}
}
.sc-traveler-check{
  display:none;
  font-size:.75rem;
  font-weight:600;
  color:var(--presence-online,var(--ink));
}
.sc-traveler.sc-done .sc-traveler-check{display:inline;}

/* ── El oficio del coyote: la burbuja de tarea que lo acompaña ─────────────── */
/* Se para al lado contrario del que mira, para no taparle la cara. */

.sc-traveler-act{
  position:absolute;
  bottom:62%;
  z-index:1;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .7rem .4rem .45rem;
  /* Chip = control de la superficie papel: 2px de trazo (DS) y sombra ancha,
     nunca el offset duro de 2px que estampa el chip contra el fondo. */
  border:2px solid var(--ink);
  border-radius:var(--radius-pill);
  background:var(--paper);
  box-shadow:var(--shadow-lifted);
  white-space:nowrap;
}
.sc-traveler-act[data-side="left"]{ right:92%; }
.sc-traveler-act[data-side="right"]{ left:92%; }
.sc-traveler-prop{
  display:block;
  width:1.5rem;
  height:1.5rem;
  flex:none;
}
.sc-traveler-label{
  font-size:.6875rem;
  line-height:1;
  color:var(--ink);
}
/* Cada tarea entra con un salto corto; se reinicia desde crowd.js. */
.sc-act-in{ animation:sc-act-pop var(--duration-base,220ms) var(--ease-out) both; }
@keyframes sc-act-pop{
  from{opacity:0; transform:translateY(6px) scale(.94);}
  to  {opacity:1; transform:none;}
}

@media (max-width:640px){
  /* En móvil la burbuja no cabe al lado: solo viaja el bicho. */
  .sc-traveler-act{ display:none; }
}

/* ── Cromo flotante sobre el gentío ───────────────────────────────────────── */

/* El CrowdStage del DS trae min-height:100%; acá le damos la altura de la
   ventana, que es lo que hace el hero de hilos.sh. */
.sc-stage{min-height:100svh;}

/* Capas del gentío:
   - [data-crowd-back] vive en z-1 (detrás de la tarjeta)
   - .sc-hero-wrap vive en z-20 (la tarjeta)
   - [data-crowd-front] vive en z-30 (delante del tercio inferior de la tarjeta,
     tal como en hilos.sh donde las mascotas inferiores tapan el borde inferior de la card)
   - .sc-topbar y [data-sound-toggle] viven en z-60 */
[data-crowd-back]{
  position:absolute;inset:0;
  z-index:1;
  background:transparent;
  overflow:hidden;
}
[data-crowd-front]{
  position:absolute;inset:0;
  z-index:30;
  background:transparent;
  pointer-events:none;
  overflow:hidden;
}

/* En escritorio la tarjeta es angosta y las mascotas de adelante le abrazan el
   borde inferior, como en hilos.sh. En teléfono la tarjeta ocupa casi todo el
   ancho: esa misma capa deja de abrazarla y le cae ENCIMA del texto —era eso, y
   no un recorte, lo que hacía que la última línea no se viera. Detrás del papel
   blanco, el gentío sigue completo y nada tapa la letra. */
@media (max-width:720px){
  [data-crowd-front]{ z-index:1; }
}

/* ── Sin velo ─────────────────────────────────────────────────────────────── */
/* Acá vivía una lámina de papel sobre el gentío, y tres más para compensarla en
   la barra, el botón y la tarjeta. Todas fuera. Medido contra las capturas de
   hilos: su gentío NO está velado — está a tinta plena, y lo que hace resaltar
   al copiloto es el papel blanco de la tarjeta contra un gentío denso y oscuro.
   Velar el gentío lo aclaraba y, de paso, obligaba a poner láminas de parche en
   todo lo que vive por encima (z-50 y z-60) para que no rompieran el parejo.
   Sin velo, cada cosa cae sola en su tono nativo y no hay nada que emparejar. */

.sc-topbar{
  position:absolute;
  top:1.25rem; left:50%;
  transform:translateX(-50%);
  z-index:60;
  width:calc(100% - 2rem);
  display:flex;
  justify-content:center;
}
/* En pantalla angosta la píldora no cabe entera: se desliza en vez de cortarse. */
@media (max-width:720px){
  .sc-topbar{
    /* flex-start + overflow para que pueda deslizarse si no cabe, pero el
       margen automático de la píldora la deja CENTRADA cuando sí cabe. Sin
       esto quedaba pegada a la izquierda: el "menú torcido". */
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:0 .25rem;
  }
  .sc-topbar::-webkit-scrollbar{display:none;}
  .sc-topbar > *{flex:0 0 auto;margin-inline:auto;}
  .sc-topbar .hl-pillnav-item,
  .sc-topbar .hl-pillnav-brand{white-space:nowrap;}
  /* Hilos en teléfono no recorta la píldora: la achica. Caen los dos enlaces
     intermedios (quedan en el pie) y marca + extremos caben hasta en 320px. */
  .hl-pillnav-item[href="#copiloto"],
  .hl-pillnav-item[href="#permiso"],
  .hl-pillnav-item[href="#entrar"]{display:none;}
}

.sc-hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.625rem;
  margin-top:1.5rem;
}
.sc-hero-note{
  margin-top:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  color:var(--ink-muted);
}

/* La tarjeta del hero flota sobre el gentío: cromo, no contenido de fondo.
   Aspect ratio y dimensiones calcadas de hilos.sh (52rem de ancho, radio 28px,
   fondo blanco nítido, con margen inferior para que el tercio bajo quede
   abrazado por las mascotas del frente mientras botones y texto quedan 100%
   despejados y legibles). */
.sc-hero-wrap{
  position:relative;
  z-index:20;
  display:flex;
  justify-content:center;
  width:100%;
  padding:0 1rem;
}
.sc-hero-wrap .hl-hero-card{
  max-width:42rem;
  padding:2rem 1.25rem 4rem;
  border-radius:var(--radius-3xl);
  /* El filete lo pone .hl-hero-card: 3px, la única pieza del DS que lo lleva.
     Acá NO se redefine el borde ni se le apila un anillo de 1px encima —eso
     era un segundo perímetro— y la sombra es la del token, ancha y suave. */
  background:#ffffff !important;
  box-shadow:var(--shadow-hero);
}
@media (min-width:640px){
  .sc-hero-wrap .hl-hero-card{
    padding:2.5rem 2.5rem 4.5rem;
  }
}
.hl-hero-title{
  /* Paridad medida contra hilos.sh en vivo: 48px/400/1.05/-0.01em en desktop y
     30.4px en teléfono (1.9rem de piso). */
  font-size:clamp(1.9rem,3.43vw,3rem);
  line-height:1.05;
  letter-spacing:-0.01em;
  font-weight:400;
  margin:.5rem 0 .75rem;
}
.sc-hero-sub{
  font-size:0.8125rem;
  line-height:1.6;
  color:var(--ink-muted);
  max-width:30rem;
  margin:0 auto;
}
.sc-hero-coyote{
  position:relative;
  z-index:2;
  display:block;
  width:clamp(4.25rem,7.5vw,5.75rem);
  margin:0 auto 1.125rem;
}
.sc-hero-subnote{
  font-size:0.8125rem;
  line-height:1.45;
  color:var(--ink-muted);
  max-width:27rem;
  margin:1.25rem auto 0;
  text-align:center;
}
/* Paridad de controles con hilos.sh (medida en vivo): enlaces de la píldora y
   botones del hero a 13px/600 con el relleno 12×24 de allá. */
.sc-topbar .hl-pillnav-item{font-size:.8125rem;font-weight:600;}
.sc-hero-actions .hl-btn{font-size:.8125rem;font-weight:600;padding:.75rem 1.5rem;min-height:3rem;}

/* Ritmo de teléfono: las secciones respiran menos que en escritorio para que
   los bloques cortos (oficios) no queden flotando en aire. */
@media (max-width:640px){
  .hl-section{padding:3rem 1.25rem;}
  .hl-logowall{gap:1.25rem 2rem;}
  .hl-logowall span{font-size:1.1rem;}
}

/* ── Por qué había mascotas que no reaccionaban ───────────────────────────── */
/* El hit-test descarta el punto si debajo del cursor hay algo con
   [data-crowd-chrome] (crowd.js, hitAt). Ese atributo está en la barra y en el
   envoltorio del hero, que son BANDAS de ancho completo: aunque se vieran
   transparentes, se comían el hover de todas las figuras a esa altura — franjas
   enteras del gentío quedaban mudas y grises.
   Solución: la banda deja pasar el puntero y solo lo capturan las piezas que de
   verdad se tocan (la píldora, la tarjeta y sus botones). Sobre esas sí se
   bloquea el hover, que es lo correcto; el resto de la franja ya responde. */
.sc-topbar,
.sc-hero-wrap,
.sc-hero-col{ pointer-events:none; }
.sc-topbar .hl-pillnav{ pointer-events:auto; background:#ffffff; }
.sc-hero-wrap .hl-hero-card{ pointer-events:auto; background:#ffffff !important; }
.sc-hero-coyote{
  pointer-events:auto;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}

/* ── Los paneles del copiloto ─────────────────────────────────────────────── */
/* El copiloto es el centro del servicio, así que aparece en cada sección
   contestando de verdad: se elige la consulta y el hilo se arma paso a paso
   (crowd.js, mountSims). Todo lo visible sale del DS —.hl-pane, .hl-msg,
   .hl-report, .hl-tab, .hl-badge—; acá solo va lo que el DS no trae. */

.sc-sim-wrap{margin-top:2.5rem;}
.sc-sim-tabs{flex-wrap:wrap;max-width:100%;}
.sc-sim-thread{display:grid;gap:.875rem;min-height:16rem;align-content:start;}
.sc-sim-think{color:var(--ink-muted);display:flex;align-items:center;gap:.5rem;}
.sc-sim-diff{display:flex;gap:.75rem;margin:0 0 .75rem;}
.sc-sim-todo{
  display:flex;align-items:center;gap:.5rem;
  margin-top:.875rem;padding-top:.875rem;
  border-top:1px solid var(--ink-hairline);
}
.sc-sim-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-top:.875rem;
}
/* Cada paso del hilo entra igual que el resto de la página (mismo keyframe del
   DS, mismo ritmo), en vez de aparecer de golpe. */
.sc-step{opacity:0;}
.sc-step.sc-in{animation:hl-landing-enter var(--duration-slow) var(--ease-out) both;}
@media (prefers-reduced-motion:reduce){
  .sc-step,.sc-step.sc-in{opacity:1;animation:none;}
}
@media (max-width:640px){
  .sc-sim-foot{flex-direction:column;align-items:flex-start;}
  /* La tira de pestañas del DS es una PISTA de píldora de una sola fila. Cuando
     envuelve, el radio de píldora se vuelve media altura (33px en dos filas) y
     la curva se come el chip activo: parece recortado. Envuelta ya no es pista,
     es lista: rectángulo de radio normal y un chip por fila. */
  .sc-sim-tabs{border-radius:var(--radius-lg);}
  .sc-sim-tabs .hl-tab{flex:1 1 100%;}
}

/* ── Promesas: Mascotas monocromo a color en hover ───────────────────────── */
.hl-feature-col img {
  height: 6.5rem;
  width: auto;
  object-fit: contain;
  margin-bottom: 1.25rem;
  filter: grayscale(1) brightness(1.2) contrast(1.3);
  transition: filter var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.hl-feature-col:hover img {
  filter: none;
  transform: translateY(-4px) scale(1.04);
}

/* ── Mapa de secciones (Tarjetas 3D con Flip y Mascota) ──────────────────── */

.sc-map {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 720px) {
  .sc-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    align-items: stretch;
    grid-template-areas:
      "control diadia"
      "control crecer"
      "trabajo dinero"
      "trabajo copiloto";
  }
  .sc-bento-control  { grid-area: control; }
  .sc-bento-dia      { grid-area: diadia; }
  .sc-bento-trabajo  { grid-area: trabajo; }
  .sc-bento-crecer   { grid-area: crecer; }
  .sc-bento-dinero   { grid-area: dinero; }
  .sc-bento-copiloto { grid-area: copiloto; }
}
@media (min-width: 1024px) {
  .sc-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "control diadia   diadia"
      "control crecer   trabajo"
      "copiloto dinero  trabajo";
  }
}

.sc-flip-card {
  perspective: 1200px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.sc-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc-flip-card.is-flipped .sc-flip-inner {
  transform: rotateY(180deg);
}

.sc-group-front,
.sc-group-back {
  border-radius: var(--radius-3xl);
  padding: 1.85rem 1.65rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: none;
}

.sc-group-front {
  position: relative;
  background: var(--tone);
  color: var(--tone-ink);
  min-height: 100%;
  height: 100%;
  transition: transform var(--duration-base) var(--ease-out);
}

.sc-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.sc-group-meta {
  flex: 1;
}
.sc-group-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.7;
  display: inline-block;
  margin-bottom: 0.25rem;
}
.sc-group-mascot {
  width: 4.75rem;
  height: 4.75rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-mascot-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.25) contrast(1.25);
  transition: filter var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.sc-flip-card:hover .sc-mascot-img {
  filter: none;
  transform: scale(1.08) rotate(-3deg);
}

.sc-group-count {
  font-family: var(--font-mono);
  opacity: 0.7;
  margin: 0.15rem 0 0;
}
.sc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}
.sc-list li {
  display: grid;
  gap: 0.125rem;
  padding-top: 0.625rem;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.sc-list li:first-child {
  padding-top: 0;
  border-top: 0;
}
.sc-list b {
  font-size: 0.875rem;
  line-height: 1.45;
  font-weight: 600;
}
.sc-list span {
  font-size: 0.75rem;
  line-height: 1.45;
  opacity: 0.8;
}

.sc-group-footer {
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  display: flex;
  justify-content: flex-end;
}

.sc-flip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 2px solid currentColor; /* control en superficie papel = 2px (DS) */
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.sc-flip-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.sc-flip-icon {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-out);
}
.sc-flip-btn:hover .sc-flip-icon {
  transform: rotate(180deg);
}

/* ── Back face (Fiel al Hilos Design System: limpio, sin perímetro negro) ── */
.sc-group-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: var(--tone);
  color: var(--tone-ink);
  border: none;
}

.sc-bp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  margin-bottom: 0.85rem;
}
.sc-bp-badge {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: currentColor;
}
.sc-bp-sub {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  opacity: 0.65;
  text-transform: uppercase;
}

.sc-bp-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.sc-bp-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sc-bp-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  color: currentColor;
  margin: 0;
}
.sc-bp-desc {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.45;
  margin: 0;
  color: currentColor;
  opacity: 0.82;
}

.sc-bp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.sc-bp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Sin trazo: en Hilos el perímetro es exclusivo de los CONTROLES (2px) y de
     .hl-hero-card (3px). Un dato es contenido, y el contenido se separa con
     RELLENO, nunca con recuadro. El único trazo legítimo de este reverso es el
     de la píldora VOLVER, que sí es control. */
  background: color-mix(in srgb, currentColor 8%, transparent);
  padding: 0.45rem 0.25rem;
  border-radius: var(--radius-md);
}
.sc-bp-stat b {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: currentColor;
  line-height: 1.2;
}
.sc-bp-stat span {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  opacity: 0.68;
  margin-top: 0.15rem;
}

.sc-flip-btn-back {
  border-color: currentColor;
  color: currentColor;
}
.sc-flip-btn-back:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ── Marco de producto ────────────────────────────────────────────────────── */
/* Borrado. El filete negro de 3px es de .hl-hero-card y de nadie más: en
   hilos.sh el mockup de "One room, the whole loop." es un panel suave con
   sombra, o sea .hl-pane, que ya está en el markup. El marco extra lo
   enmarcaba dos veces y le ponía un #000 crudo fuera de token. */

/* ── Preguntas: dos columnas como Hilos ───────────────────────────────────── */
/* Izquierda: eyebrow + título + ilustración editorial (persona + taza).
   Derecha: el acordeón. En móvil se apilan.
   NO es mascota. La figura es art/coffee-time.svg, la ilustración editorial
   del DS de Hilos (misma que usa hilos.sh en FAQ). Tinta gruesa, compacta,
   bajo el título. Prohibido meter elenco (perezoso, tucán, tapir…). */
.sc-faq{
  display:grid;
  gap:2.5rem;
  align-items:start;
}
.sc-faq-intro .hl-display{margin:.75rem 0 0;max-width:12ch;}
.sc-faq-art{
  display:block;
  width:clamp(7rem,14vw,9.25rem);
  height:auto;
  margin-top:1.25rem;
  pointer-events:none;
}
.sc-faq-list{min-width:0;}
@media (min-width:900px){
  .sc-faq{
    grid-template-columns:minmax(14rem,0.72fr) minmax(0,1.4fr);
    gap:3.5rem;
    align-items:start;
  }
  .sc-faq-art{margin-top:1.75rem;}
}

/* ── Detalles de página ───────────────────────────────────────────────────── */

.sc-center{text-align:center;}
.sc-narrow{max-width:38rem;margin-left:auto;margin-right:auto;}
.sc-divider{height:1px;background:var(--ink-hairline);border:0;margin:0;}
.sc-footer-cols{display:grid;gap:2rem;}
/* Con la columna Legal ya son cuatro: en tableta van de dos en dos, y sólo en
   escritorio se abren en fila para que ningún título quede partido. */
@media (min-width:640px){.sc-footer-cols{grid-template-columns:repeat(2,1fr);}}
@media (min-width:960px){.sc-footer-cols{grid-template-columns:2fr 1fr 1fr 1fr;}}
/* Escala de .hl-eyebrow (0.75rem / 600 / --tracking-eyebrow). El color no es
   --ink-muted como en el DS porque el pie va invertido: tinta de fondo. */
.sc-footer-col h4{
  font-family:var(--font-sans);
  font-size:.75rem;font-weight:600;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;opacity:.55;margin:0 0 .875rem;
}
.sc-footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;}

/* Píldora del footer: fondo blanco puro, texto tinta #141510 al 100% de opacidad y trazo 2px DS */
.hl-footer a.hl-footer-cta,
.sc-footer-col .hl-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #ffffff !important;
  color: var(--ink) !important;
  opacity: 1 !important;
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: .5rem 1.25rem;
  border: 2px solid #000;
  box-shadow: var(--shadow-lifted);
}
.hl-footer a.hl-footer-cta:hover,
.sc-footer-col .hl-footer-cta:hover {
  background: var(--paper) !important;
  color: var(--ink) !important;
  opacity: 1 !important;
}

/* El pie del DS es tinta sobre papel invertido; el gentío no entra ahí. */
.sc-skip{
  position:absolute;left:-9999px;
}
.sc-skip:focus{
  left:1rem;top:1rem;z-index:100;
  background:var(--ink);color:var(--paper);
  padding:.5rem 1rem;border-radius:var(--radius-pill);
}

/* ── Bicho dentro del titular ──────────────────────────────────────────
   Lo que el screenshot de hilos no muestra y el video sí: mascotas
   sentadas ENTRE las palabras del titular, a la altura de la mayúscula.
   El blanco no es un brillo: es relleno blanco puro contra el papel
   #F1F2EE. El filtro lava el pastel del arte a blanco y deja la tinta.  */
.sc-en-titular{
  display:inline-block;position:relative;
  width:.82em;height:.82em;vertical-align:baseline;
  margin:0 .06em;
  filter:grayscale(1) brightness(2);
  animation:sc-respira 3.2s ease-in-out infinite;
}
.sc-en-titular img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:bottom;
}
.sc-en-titular .sc-utensilio{
  width:52%;height:52%;inset:auto -14% 8% auto;
  transform:rotate(-18deg);transform-origin:bottom right;
  animation:sc-trabaja 1.6s ease-in-out infinite;
}
@keyframes sc-respira{
  0%,100%{transform:translateY(0) rotate(0)}
  50%    {transform:translateY(-.08em) rotate(-2.5deg)}
}
@keyframes sc-trabaja{
  0%,100%{transform:rotate(-18deg)}
  50%    {transform:rotate(-4deg) translateY(-6%)}
}
@media (prefers-reduced-motion:reduce){
  .sc-en-titular,.sc-en-titular .sc-utensilio{animation:none}
}

/* ══ Páginas legales ═══════════════════════════════════════════════════════
   Privacidad, términos y eliminación de datos. El texto es el mismo que ya
   está registrado ante la Chrome Web Store y Meta (scriba.cornelio.app):
   acá sólo cambia la superficie, que pasa a la línea Hilos. Papel, Fraunces
   en los titulares, hairline en vez de trazo — una página legal es
   contenido, nunca un control, así que no lleva borde de 2px. */
.sc-legal{max-width:44rem;margin:0 auto;padding:6.5rem 1.5rem 4rem;}
.sc-legal-head{padding-bottom:2rem;border-bottom:1px solid var(--ink-hairline);}
.sc-legal-head h1{margin:.75rem 0 0;font-size:2.25rem;line-height:1.08;}
.sc-legal-meta{margin:1rem 0 0;font-size:.8125rem;color:var(--ink-muted);}
.sc-legal-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;}
.sc-legal-nav a{
  font-family:var(--font-sans);font-size:.78rem;font-weight:600;
  text-decoration:none;color:var(--ink-muted);
  padding:.4rem .85rem;border-radius:999px;background:var(--ink-wash);
  transition:background .15s ease,color .15s ease;
}
.sc-legal-nav a:hover{background:var(--chip);color:var(--ink);}
.sc-legal-nav a[aria-current]{background:var(--ink);color:var(--paper);}
.sc-legal-body{font-family:var(--font-sans);color:var(--ink);}
.sc-legal-body h2{
  font-family:var(--font-display);font-weight:600;
  font-size:1.2rem;line-height:1.2;margin:2.75rem 0 .75rem;
}
.sc-legal-body p,.sc-legal-body li{font-size:.95rem;line-height:1.7;}
.sc-legal-body p{margin:0 0 1rem;}
.sc-legal-body ul,.sc-legal-body ol{margin:0 0 1rem;padding-left:1.25rem;}
.sc-legal-body li{margin-bottom:.5rem;}
.sc-legal-body a{color:var(--ink);text-underline-offset:3px;}
.sc-legal-body code{
  font-family:var(--font-mono);font-size:.85em;
  background:var(--ink-wash);padding:.1em .35em;border-radius:4px;
}
.sc-legal-note{
  margin:2rem 0 0;padding:1rem 1.25rem;border-radius:var(--radius-lg);
  background:var(--ink-wash);font-size:.9rem;line-height:1.6;
}
@media (max-width:640px){
  .sc-legal{padding:5.5rem 1.25rem 3rem;}
  .sc-legal-head h1{font-size:1.75rem;}
}

/* ── Cintillo de profesiones y oficios (Marquee) ─────────────────────────── */
.sc-cintillo-section {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}
.sc-cintillo-container {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
  margin-top: 0.5rem;
}
.sc-cintillo-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.sc-cintillo-track {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
  animation: sc-marquee 45s linear infinite;
}
.sc-cintillo-track-rev {
  animation: sc-marquee-rev 50s linear infinite;
}
.sc-cintillo-wrap:hover .sc-cintillo-track {
  animation-play-state: paused;
}
.sc-cintillo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--ink-hairline);
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 0;
  font-size: 1.0625rem;
  color: var(--ink);
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.sc-cintillo-pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover), inset 0 0 0 1px var(--ink-hairline);
}
.sc-cintillo-dot {
  font-size: 0.65rem;
  opacity: 0.45;
  color: var(--ink);
}

@keyframes sc-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes sc-marquee-rev {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-cintillo-track { animation: none; }
  .sc-cintillo-wrap {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
  }
  .sc-cintillo-wrap::-webkit-scrollbar { display: none; }
}

/* ══ Precios ═══════════════════════════════════════════════════════════════
   Superficie papel: el plan destacado es Moment Card (relleno + -ink, cero
   borde). Los otros son panes con hairline inset. El trazo 2px queda solo
   en controles (toggle, CTA outline). */
.sc-precios-head{margin-bottom:2.25rem;}
.sc-billing{
  display:flex;
  justify-content:center;
  margin:1.75rem 0 0;
}
.sc-billing-pill{
  display:inline-flex;
  align-items:center;
  gap:.15rem;
  padding:.25rem;
  border-radius:var(--radius-pill);
  background:var(--chip);
}
.sc-billing-opt{
  border:0;
  background:transparent;
  color:var(--ink-muted);
  font-family:var(--font-sans);
  font-size:.8125rem;
  font-weight:600;
  padding:.55rem 1.15rem;
  border-radius:var(--radius-pill);
  cursor:pointer;
}
.sc-billing-opt[aria-pressed="true"]{
  background:var(--ink);
  color:var(--paper);
}
.sc-billing-opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.sc-plans{
  display:grid;
  gap:1.25rem;
  align-items:stretch;
}
@media (min-width:900px){
  .sc-plans{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;}
  .sc-plan-team{transform:translateY(-.5rem);}
}
.sc-plan{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:var(--radius-3xl);
  padding:1.75rem 1.5rem 1.5rem;
}
.sc-plan-base{
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--ink-hairline);
}
.sc-plan-pro{
  background:#fff;
  box-shadow:var(--shadow-pane),inset 0 0 0 1px var(--ink-hairline);
}
.sc-plan-team{
  background:var(--moment-yellow);
  color:var(--moment-yellow-ink);
  box-shadow:var(--shadow-lifted);
}
.sc-plan-badge{
  position:absolute;
  top:-.7rem;
  right:1.25rem;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.35rem .75rem;
  border-radius:var(--radius-pill);
}
.sc-plan-name{
  font-family:var(--font-sans);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.72;
  margin:0 0 .35rem;
}
.sc-plan-price{
  font-family:var(--font-display);
  font-weight:400;
  font-size:2.25rem;
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0;
}
.sc-plan-price span{
  font-family:var(--font-sans);
  font-size:.875rem;
  font-weight:500;
  opacity:.7;
}
.sc-plan-desc{
  font-size:.875rem;
  line-height:1.5;
  margin:.6rem 0 1.15rem;
  opacity:.85;
}
.sc-plan-list{
  list-style:none;
  margin:0 0 1.35rem;
  padding:0;
  display:grid;
  gap:.55rem;
  flex:1;
}
.sc-plan-list li{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
  font-size:.875rem;
  line-height:1.4;
}
.sc-plan-list svg{flex:none;margin-top:.15rem;}
.sc-plan .hl-btn{width:100%;}
.sc-plan-team .hl-btn-primary{background:var(--ink);color:var(--paper);}
.sc-precios-foot{
  text-align:center;
  color:var(--ink-muted);
  font-size:.8125rem;
  margin:1.5rem 0 0;
}

/* ══ Login ════════════════════════════════════════════════════════════════
   Misma escena que el hero: gentío a pantalla y card flotando. El card es
   más angosto (como el de hilos.sh/login) y el form va email → entrar → o
   → Google. Cero squircle de color: el perezoso se apoya en el papel. */
.sc-login-stage .sc-hero-wrap .hl-hero-card{
  max-width:26.5rem;
  padding:2rem 1.5rem 4rem;
}
@media (min-width:640px){
  .sc-login-stage .sc-hero-wrap .hl-hero-card{
    padding:2.25rem 2rem 4.5rem;
  }
}
.sc-login-stage .hl-hero-title{
  font-size:clamp(1.65rem,2.4vw,2.15rem);
  margin:.15rem 0 .45rem;
}
.sc-login-form{
  display:grid;
  gap:.7rem;
  margin:1.35rem 0 0;
  text-align:left;
}
.sc-login-stage .hl-input{
  border:2px solid var(--ink);
  border-radius:14px;
  padding:.8rem 1rem;
  font-size:.9375rem;
  background:#fff;
  box-shadow:none;
  width:100%;
}
.sc-login-stage .hl-input:focus-visible{
  border-color:var(--ink);
  box-shadow:0 0 0 3px var(--moment-yellow);
}
.sc-login-stage .hl-btn{width:100%;}
.sc-login-google svg{flex:none;}
.sc-login-or{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:1rem 0;
  color:var(--ink-muted);
  font-size:.75rem;
}
.sc-login-or::before,
.sc-login-or::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--ink-hairline);
}
.sc-login-foot{
  text-align:center;
  font-size:.8125rem;
  color:var(--ink-muted);
  margin:1.15rem 0 0;
}
.sc-login-foot a{
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--moment-yellow);
}
@media (max-width:640px){
  .sc-plan-price{font-size:1.9rem;}
}

/* ══ Amigo — copiloto del prospecto ═══════════════════════════════════════
   Misma superficie de producto que los paneles del sitio: pane, burbujas,
   chips. Escritorio = panel a la derecha. Teléfono = popup que se minimiza. */
.sc-amigo-wash{
  position:fixed;inset:0;z-index:70;
  background:color-mix(in srgb,var(--ink) 18%,transparent);
}
.sc-amigo{
  position:fixed;z-index:80;
  right:1.25rem;bottom:1.25rem;
  width:min(24.5rem,calc(100vw - 1.5rem));
}
.sc-amigo-pane{
  display:flex;flex-direction:column;
  height:min(36rem,calc(100svh - 2.5rem));
  background:var(--paper);
}
.sc-amigo-head{padding:.7rem .85rem;justify-content:flex-start;}
.sc-amigo-face{
  width:2.25rem;height:2.25rem;flex:none;
  object-fit:contain;background:transparent;
  display:block;
}
.sc-amigo-who{flex:1;min-width:0;display:grid;line-height:1.2;}
.sc-amigo-who b{font:600 .875rem/1.2 var(--font-sans);color:var(--ink);}
.sc-amigo-who small{color:var(--ink-muted);font-size:.6875rem;}
.sc-amigo-tools{display:flex;gap:.15rem;margin-left:auto;}
.sc-amigo-tool{
  width:2rem;height:2rem;border:0;background:transparent;
  color:var(--ink-muted);font-size:1rem;line-height:1;cursor:pointer;
  border-radius:var(--radius-md);
}
.sc-amigo-tool:hover,.sc-amigo-tool:focus-visible{background:var(--chip);color:var(--ink);}
.sc-amigo-grab{display:none;}
.sc-amigo-wide-btn{display:none;place-items:center;}
.sc-amigo-wide-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
.sc-amigo-thread{
  flex:1;overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;align-content:start;gap:10px;
  padding:1.1rem;
  background:color-mix(in srgb,var(--paper) 38%,transparent);
}
.sc-amigo-thread .hl-msg{display:contents;}
.sc-amigo-msg{
  max-width:88%;padding:10px 13px;align-self:flex-start;
  border:0;border-radius:16px 16px 16px 5px;
  background:var(--chip);box-shadow:none;
}
.sc-amigo-msg.user{
  align-self:flex-end;border-radius:16px 16px 5px 16px;
  background:var(--ink);
}
.sc-amigo-msg > span{
  display:block;margin-bottom:4px;
  color:var(--ink-muted);font-family:var(--font-mono);
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.sc-amigo-msg p{margin:0;color:var(--ink);font-size:.875rem;line-height:1.5;white-space:pre-wrap;}
.sc-amigo-msg.sc-amigo-rich p{white-space:pre-wrap;margin:0 0 .55rem;}
.sc-amigo-msg.sc-amigo-rich p:last-child{margin-bottom:0;}
.sc-amigo-msg.sc-amigo-rich code{font:400 .8em/1.4 var(--font-mono);background:var(--chip);}
.sc-amigo-code{
  margin:.35rem 0 0;padding:.65rem .75rem;overflow:auto;
  background:var(--paper);border:1px solid var(--hair,#e8e7e2);border-radius:6px;
  font:400 11.5px/1.45 var(--font-mono);white-space:pre-wrap;
}
.sc-amigo-app{
  display:block;width:100%;height:14rem;min-height:7rem;max-height:min(40rem,70svh);
  margin:.45rem 0 0;
  border:1px solid var(--hair,#e8e7e2);border-radius:6px;background:var(--paper);
}
.sc-amigo-msg.user > span,.sc-amigo-msg.user p{color:var(--paper);}
.sc-amigo-msg.think p{color:var(--ink-muted);}
.sc-amigo-thread .hl-report,.sc-amigo-card{align-self:stretch;max-width:100%;}
.sc-amigo-thread .sc-step:has(.sc-amigo-quiz),
.sc-amigo-thread .sc-step:has(.sc-amigo-decision),
.sc-amigo-thread .sc-step:has(.sc-amigo-tour),
.sc-amigo-thread .sc-step:has(.sc-amigo-seccion){align-self:stretch;max-width:100%;}
.sc-amigo-suggest{
  display:flex;flex-wrap:wrap;gap:.4rem;
  padding:0 .85rem .7rem;
}
.sc-amigo-suggest[hidden]{display:none;}
.sc-amigo-chip{
  border:0;background:var(--chip);color:var(--ink);
  font-family:var(--font-sans);font-size:.75rem;font-weight:600;
  padding:.4rem .7rem;border-radius:var(--radius-pill);cursor:pointer;
}
.sc-amigo-chip:hover,.sc-amigo-chip:focus-visible{background:var(--ink);color:var(--paper);}
.sc-amigo-pending{
  display:flex;flex-wrap:wrap;gap:.4rem;
  padding:.15rem .85rem .55rem;
}
.sc-amigo-pending[hidden]{display:none;}
.sc-amigo-chip-file{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--chip);color:var(--ink);
  font-family:var(--font-sans);font-size:.75rem;font-weight:600;
  padding:.35rem .55rem .35rem .65rem;border-radius:var(--radius-sm);
}
.sc-amigo-chip-file button{
  width:1.25rem;height:1.25rem;border:0;background:transparent;
  color:var(--ink-muted);cursor:pointer;border-radius:50%;line-height:1;
}
.sc-amigo-chip-file button:hover,.sc-amigo-chip-file button:focus-visible{background:var(--ink);color:var(--paper);}
.sc-amigo-err{
  margin:0;padding:0 .85rem .45rem;
  color:var(--ink-muted);font-size:.75rem;
}
.sc-amigo-err[hidden]{display:none;}
.sc-amigo-form{
  /* viewport-fit=cover mete la hoja debajo de la barra de gestos: sin este
     colchón el botón de micrófono queda cortado contra el borde del teléfono. */
  padding:10px 12px max(8px, env(safe-area-inset-bottom, 0px));
  box-shadow:inset 0 1px 0 var(--ink-hairline);
  background:transparent;
}
.sc-amigo-compose{display:grid;grid-template-columns:2.75rem minmax(0,1fr) 2.75rem;gap:8px;align-items:end;}
.sc-amigo-compose[hidden]{display:none;}
.sc-amigo-field{
  min-height:48px;max-height:140px;resize:none;min-width:0;
  border:0;border-radius:14px;padding:12px 14px;
  background:var(--chip);color:var(--ink);box-shadow:none;
  font:400 .9375rem/1.4 var(--font-sans);
}
.sc-amigo-field:focus-visible{outline:2px solid var(--ink);outline-offset:2px;background:#fff;}
.sc-amigo-ico{
  width:2.75rem;height:2.75rem;min-width:2.75rem;padding:0;border:0;
  background:transparent;color:var(--ink-muted);
  border-radius:var(--radius-md);cursor:pointer;
  display:inline-grid;place-items:center;
}
.sc-amigo-ico:hover,.sc-amigo-ico:focus-visible{background:var(--chip);color:var(--ink);}
.sc-amigo-send{
  background:var(--ink);color:var(--paper);
}
.sc-amigo-send:hover,.sc-amigo-send:focus-visible{background:var(--ink);filter:brightness(.92);color:var(--paper);}
.sc-amigo-send [data-ico="send"]{display:none;}
.sc-amigo-send[data-mode="send"] [data-ico="mic"]{display:none;}
.sc-amigo-send[data-mode="send"] [data-ico="send"]{display:block;}
.sc-amigo-rec{
  min-height:70px;
  display:grid;grid-template-columns:auto minmax(80px,1fr) 2.75rem 2.75rem;
  gap:10px;align-items:center;
}
.sc-amigo-rec[hidden]{display:none;}
.sc-amigo-rec-live{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.75rem;font-weight:650;color:#b34b2b;white-space:nowrap;
}
.sc-amigo-rec-live i{
  width:7px;height:7px;border-radius:50%;
  background:#b34b2b;display:inline-block;
}
.sc-amigo-rec-wave{height:28px;display:flex;align-items:center;gap:3px;}
.sc-amigo-rec-wave i{
  width:3px;height:28%;border-radius:3px;background:var(--ink);
  animation:scAmigoWave .8s ease-in-out infinite alternate;
}
.sc-amigo-rec-wave i:nth-child(3n+1){animation-delay:-.2s;}
.sc-amigo-rec-wave i:nth-child(3n+2){animation-delay:-.45s;}
@keyframes scAmigoWave{to{height:92%;opacity:.55;}}
.sc-amigo-card{
  padding:1rem 1.05rem 1.05rem;
  border-radius:var(--radius-xl);
  background:var(--moment-yellow);color:var(--moment-yellow-ink);
}
.sc-amigo-card[data-tono="coral"]{background:var(--moment-coral);color:var(--moment-coral-ink);}
.sc-amigo-card[data-tono="mint"]{background:var(--moment-mint,#dfe8cf);color:var(--ink);}
.sc-amigo-card-k{font:400 10.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7;}
.sc-amigo-card h3{margin:.35rem 0 .55rem;font:500 1.15rem/1.2 var(--font-display,Georgia,serif);}
.sc-amigo-card p{margin:0 0 .85rem;font-size:.8125rem;line-height:1.5;opacity:.88;}
.sc-amigo-card img{display:block;width:auto;height:5.5rem;margin:0 auto .75rem;object-fit:contain;}
.sc-amigo-card ol{margin:0 0 .85rem;padding-left:1.15rem;font-size:.8125rem;line-height:1.55;}
.sc-amigo-card-cta{
  width:100%;min-height:44px;border:0;border-radius:var(--radius-md);
  background:var(--ink);color:var(--paper);
  font:600 .875rem var(--font-sans);cursor:pointer;
}
.sc-amigo-card-ghost{
  width:100%;min-height:40px;margin-top:.35rem;border:0;background:transparent;
  color:inherit;font:500 .8125rem var(--font-sans);cursor:pointer;opacity:.75;
}
.sc-amigo-quiz,.sc-amigo-decision,.sc-amigo-tour,.sc-amigo-seccion{
  align-self:stretch;max-width:100%;
  padding:1rem 1.05rem 1.05rem;
  border-radius:var(--radius-xl);
  background:var(--moment-yellow);color:var(--moment-yellow-ink);
}
.sc-amigo-quiz h3,.sc-amigo-seccion h3,.sc-amigo-tour h3{
  margin:.35rem 0 .55rem;font:500 1.15rem/1.2 var(--font-display,Georgia,serif);
}
.sc-amigo-quiz{display:grid;gap:.55rem;}
.sc-amigo-quiz label{display:grid;gap:.25rem;font-size:.75rem;font-weight:600;}
.sc-amigo-quiz input,.sc-amigo-quiz select,.sc-amigo-quiz textarea{
  min-height:44px;border:0;border-radius:10px;padding:.65rem .8rem;
  background:#fff;color:var(--ink);font:400 .875rem var(--font-sans);
}
.sc-amigo-quiz textarea{min-height:5.5rem;resize:vertical;}
.sc-amigo-quiz input:focus-visible,.sc-amigo-quiz select:focus-visible,.sc-amigo-quiz textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;
}
.sc-amigo-decision p{margin:0 0 .65rem;font-size:.875rem;line-height:1.45;}
.sc-amigo-decision-row{display:flex;flex-wrap:wrap;gap:.4rem;}
.sc-amigo-tour-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.55rem;
}
.sc-amigo-tour-item{
  min-height:52px;padding:.55rem .65rem;border:0;border-radius:10px;
  background:#fff;color:var(--ink);text-align:left;cursor:pointer;
  display:grid;gap:.15rem;
}
.sc-amigo-tour-item b{font:600 .8125rem/1.2 var(--font-sans);}
.sc-amigo-tour-item small{color:var(--ink-muted);font-size:.6875rem;line-height:1.3;}
.sc-amigo-tour-item:hover,.sc-amigo-tour-item:focus-visible{background:var(--ink);color:var(--paper);}
.sc-amigo-tour-item:hover small,.sc-amigo-tour-item:focus-visible small{color:inherit;opacity:.75;}
.sc-amigo-seccion[data-tono="blue"]{background:var(--moment-blue);color:var(--moment-blue-ink);}
.sc-amigo-seccion[data-tono="yellow"]{background:var(--moment-yellow);color:var(--moment-yellow-ink);}
.sc-amigo-seccion[data-tono="coral"]{background:var(--moment-coral);color:var(--moment-coral-ink);}
.sc-amigo-seccion[data-tono="pink"]{background:var(--moment-pink);color:var(--moment-pink-ink);}
.sc-amigo-seccion img{display:block;width:auto;height:4.25rem;margin:.15rem auto .55rem;object-fit:contain;}
.sc-amigo-seccion p{margin:0 0 .7rem;font-size:.8125rem;line-height:1.45;opacity:.88;}
.sc-amigo-seccion dl{margin:0;display:grid;gap:.35rem;}
.sc-amigo-seccion dl div{
  display:flex;justify-content:space-between;gap:.75rem;
  padding:.35rem 0;box-shadow:inset 0 1px 0 color-mix(in srgb,currentColor 16%,transparent);
  font-size:.8125rem;
}
.sc-amigo-seccion dt{opacity:.72;}
.sc-amigo-seccion dd{margin:0;font-weight:600;text-align:right;}
.sc-amigo-flow{
  margin:.45rem 0 0;padding:0;list-style:none;
  display:grid;gap:.35rem;
}
.sc-amigo-flow li{
  position:relative;padding:.55rem .7rem .55rem 2.1rem;
  background:var(--paper);border-radius:8px;font-size:.8125rem;
}
.sc-amigo-flow li::before{
  content:counter(step);counter-increment:step;
  position:absolute;left:.55rem;top:50%;transform:translateY(-50%);
  font:500 .6875rem/1 var(--font-mono);opacity:.55;
}
.sc-amigo-flow{counter-reset:step;}
.sc-amigo-alta{
  display:grid;gap:.55rem;
}
.sc-amigo-alta label{display:grid;gap:.25rem;font-size:.75rem;font-weight:600;}
.sc-amigo-alta input,.sc-amigo-alta select{
  min-height:44px;border:0;border-radius:10px;padding:.65rem .8rem;
  background:#fff;color:var(--ink);font:400 .875rem var(--font-sans);
}
.sc-amigo-alta input:focus-visible,.sc-amigo-alta select:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.sc-amigo-shot{
  display:block;max-width:100%;max-height:11rem;
  border-radius:var(--radius-lg);margin-top:.4rem;
}
.sc-amigo-note{display:block;width:100%;margin-top:.4rem;height:2.25rem;}
.sc-amigo-file{
  display:inline-block;margin-top:.4rem;
  background:var(--chip);padding:.4rem .7rem;
  border-radius:var(--radius-pill);font-size:.75rem;font-weight:600;
}
.sc-amigo-dock{
  position:fixed;z-index:80;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  width:3.75rem;height:3.75rem;padding:.2rem;
  border:2px solid var(--ink);border-radius:var(--radius-pill);
  background:var(--paper);box-shadow:var(--shadow-lifted);cursor:pointer;
}
.sc-amigo-dock img{display:block;width:100%;height:auto;}
html[data-amigo="min"] .sc-amigo,
html[data-amigo="min"] .sc-amigo-wash{display:none;}
@media (min-width:900px){
  .sc-amigo-wash{display:none;}
  .sc-amigo{bottom:1.5rem;right:1.5rem;}
  .sc-amigo-wide-btn{display:inline-grid;}
  .sc-amigo[data-amigo-wide]{
    top:1.25rem;bottom:1.25rem;right:1.25rem;
    width:min(50vw, calc(100vw - 3rem));
  }
  .sc-amigo[data-amigo-wide] .sc-amigo-pane{
    height:100%;
  }
}
@media (max-width:899px){
  .sc-amigo{
    inset:auto 0 0;right:0;width:100%;
    /* --amigo-inset = lo que tapa el teclado; sin esto el composer se hunde. */
    bottom:var(--amigo-inset,0px);
  }
  .sc-amigo-thread{touch-action:pan-y;}
  .sc-amigo-grab{
    display:block;flex:none;position:relative;
    width:100%;height:1.35rem;border:0;padding:0;
    background:transparent;cursor:grab;touch-action:none;
  }
  .sc-amigo-grab::before{
    content:"";position:absolute;left:50%;top:50%;
    width:2.25rem;height:4px;border-radius:999px;
    transform:translate(-50%,-50%);
    background:color-mix(in srgb,var(--ink) 22%,transparent);
  }
  .sc-amigo-head{touch-action:none;}
  .sc-amigo-pane{
    height:var(--amigo-h, 56svh);
    max-height:100svh;
    border-radius:var(--radius-3xl) var(--radius-3xl) 0 0;
    overflow:hidden;
    transition:height .34s cubic-bezier(.2,.85,.25,1), border-radius .28s ease, padding-top .28s ease;
  }
  .sc-amigo[data-amigo-sheet="full"] .sc-amigo-pane{
    padding-top:env(safe-area-inset-top, 0px);
    border-radius:0;
  }
  .sc-amigo[data-dragging] .sc-amigo-pane{
    transition:none;
    border-radius:var(--radius-3xl) var(--radius-3xl) 0 0;
  }
  .sc-amigo[data-dragging] .sc-amigo-thread{overflow:hidden;}
  .sc-amigo-min-btn{display:inline-grid;}
}
@media (prefers-reduced-motion:reduce){
  .sc-amigo,.sc-amigo-dock,.sc-traveler-hint,.sc-amigo-pane{transition:none;}
}

/* Marca Cuaderno (31-oct-2026): el logotipo ocupa el lugar de la palabra.
   La píldora conserva su alto (33 px) y el pie su ritmo de dos renglones. */
.sc-brand{display:inline-flex;align-items:center;min-height:2.0625rem;padding-inline:.625rem;}
.sc-brand-logo{display:block;height:1.25rem;width:auto;}
.hl-footer-tagline .sc-footer-logo{display:block;height:1.875rem;width:auto;margin-bottom:.25rem;}
@media (max-width:360px){
  .sc-brand-logo{height:1.125rem;}
}
/* «Entrar a Cuaderno» es más largo que «Entrar a Scriba»: en teléfono los dos
   botones del hero siguen en una fila si el relleno lateral cede 6 px. */
@media (max-width:420px){
  .sc-hero-actions .hl-btn{padding-inline:1.125rem;}
}