/* ============ WIDGET: WORKBOOK (lead magnet) ============ */
/* Bottom-left. Deliberadamente distinto del widget de ansiedad (bottom-right):
   aquel es una conversacion (circulo, burbuja, coral); este es un objeto
   (rectangulo, portada, teal profundo, amarillo). */

.wb, .wb-overlay{
  --wb-gap:24px;            /* separacion del borde inferior; se ajusta en movil */
  --wb-panel:var(--teal-deep,#00404c);
  --wb-on-panel:var(--cream,#F5EBE2);
  --wb-accent:var(--yellow,#FFDA8E);
}
.wb{
  --wb-lift:0px;   /* lo sube por encima del banner de cookies en movil */
  position:fixed; left:var(--wb-gap); bottom:calc(var(--wb-gap) + var(--wb-lift)); z-index:880;
  transition:bottom .3s ease;
  font-family:'Figtree',system-ui,sans-serif;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.wb.--in{opacity:1; transform:none}
.wb[hidden]{display:none !important}

/* ---------- 1. Reposo: el cuaderno sobre una repisa ---------- */
.wb-rest{
  display:flex; align-items:center; gap:13px;
  background:var(--wb-panel); color:var(--wb-on-panel);
  border:0; padding:11px 20px 11px 13px; cursor:pointer; text-align:left;
  border-radius:6px 16px 16px 6px;
  box-shadow:0 0 0 1px rgba(245,235,226,.16), 0 16px 44px -18px rgba(6,43,50,.7);
  font:inherit;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s;
}
.wb-rest:hover{transform:translateY(-3px); box-shadow:0 0 0 1px rgba(245,235,226,.24), 0 22px 52px -18px rgba(6,43,50,.78)}
.wb-rest:focus-visible{outline:3px solid var(--wb-accent); outline-offset:3px}

/* La portada asoma por encima de la repisa, con canto de papel */
.wb-rest .wb-cover{
  width:53px; flex:0 0 53px; margin-top:-24px; margin-bottom:-4px;
  transform:rotate(-4deg); transform-origin:bottom center;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.wb-rest:hover .wb-cover{transform:rotate(-4deg) translateY(-4px)}

.wb-cover{display:block; position:relative}
.wb-cover img{
  display:block; width:100%; height:auto; border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 22px -8px rgba(6,43,50,.8);
}
.wb-rest-txt{display:grid; gap:1px; min-width:0}
.wb-rest-t{font-size:.87rem; font-weight:700; line-height:1.25}
.wb-rest-s{font-size:.72rem; line-height:1.3; color:rgba(245,235,226,.62)}

/* Descartar sin tener que abrirla primero */
.wb-rest-x{
  position:absolute; top:-7px; right:-7px; width:22px; height:22px; padding:0;
  border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  background:var(--wb-panel); color:rgba(245,235,226,.75);
  box-shadow:0 0 0 1px rgba(245,235,226,.28), 0 4px 12px -4px rgba(6,43,50,.7);
  opacity:0; transform:scale(.6);
  transition:opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1), color .18s;
}
.wb:hover .wb-rest-x, .wb-rest-x:focus{opacity:1; transform:none}
.wb-rest-x:hover{color:var(--wb-on-panel)}
.wb-rest-x:focus-visible{outline:2px solid var(--wb-accent); outline-offset:2px}
.wb-rest-x svg{width:9px; height:9px}
/* Sin hover (tactil) siempre visible, o no habria forma de descartarla */
@media (hover:none){ .wb-rest-x{opacity:1; transform:none} }

/* ---------- 2. Panel abierto ---------- */
.wb-panel{
  position:relative; width:min(332px, calc(100vw - 2 * var(--wb-gap)));
  background:var(--wb-panel); color:var(--wb-on-panel);
  border-radius:20px; padding:0 24px 22px;
  box-shadow:0 0 0 1px rgba(245,235,226,.14), 0 30px 70px -24px rgba(6,43,50,.72);
  margin-top:64px; /* deja sitio a la portada que sobresale */
}
.wb-panel-head{margin-top:-52px; margin-bottom:14px}
.wb-panel-head .wb-cover{width:88px; transform:rotate(-3deg)}
.wb-panel-title{
  font-family:'ElCamino','Figtree',sans-serif; text-transform:uppercase;
  font-size:1.34rem; line-height:.96; letter-spacing:.3px; margin:0 0 10px;
  padding-right:26px;   /* deja libre el boton de cerrar */
}

.wb-lead{font-size:.85rem; line-height:1.5; color:rgba(245,235,226,.8); margin:0 0 4px}
.wb-note{font-size:.72rem; line-height:1.4; color:rgba(245,235,226,.55); margin:8px 0 16px}

/* Cerrar */
.wb-x{
  position:absolute; top:10px; right:12px; width:28px; height:28px; padding:0;
  border:0; background:transparent; cursor:pointer; border-radius:50%;
  color:rgba(245,235,226,.5); display:grid; place-items:center;
  transition:color .18s, background .18s;
}
.wb-x:hover{color:var(--wb-on-panel); background:rgba(245,235,226,.1)}
.wb-x:focus-visible{outline:2px solid var(--wb-accent); outline-offset:2px}
.wb-x svg{width:13px; height:13px}

/* ---------- 3. Formulario ---------- */
.wb-form{display:grid; gap:9px}
.wb-field{display:grid; gap:4px}
.wb-field > span{font-size:.71rem; font-weight:600; color:rgba(245,235,226,.62)}
.wb-form input, .wb-form select{
  width:100%; font:inherit; font-size:.87rem; color:var(--ink,#24201E);
  background:var(--paper,#FBF6EF); border:1.5px solid transparent; border-radius:10px;
  padding:9px 12px; transition:border-color .18s, box-shadow .18s;
}
.wb-form select{appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2324201E' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.wb-form input:focus, .wb-form select:focus{
  outline:none; border-color:var(--wb-accent); box-shadow:0 0 0 3px rgba(255,218,142,.28);
}
.wb-form input[aria-invalid="true"]{border-color:#ff9d8a}

/* honeypot */
.wb-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Consentimiento */
.wb-consents{display:grid; gap:7px; margin-top:3px}
.wb-check{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:start;
  font-size:.71rem; line-height:1.4; color:rgba(245,235,226,.72); cursor:pointer}
.wb-check input{
  appearance:none; width:15px; height:15px; margin:1px 0 0; flex:none; cursor:pointer;
  border:1.5px solid rgba(245,235,226,.45); border-radius:4px; background:transparent;
  transition:background .16s, border-color .16s;
}
.wb-check input:checked{background:var(--wb-accent); border-color:var(--wb-accent)}
.wb-check input:checked::after{
  content:""; display:block; width:100%; height:100%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4 5.8 10 11 4.2' fill='none' stroke='%2300404c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.wb-check input:focus-visible{outline:2px solid var(--wb-accent); outline-offset:2px}
.wb-check a{color:var(--wb-accent); text-decoration:underline; text-underline-offset:2px}

/* Boton */
.wb-submit{
  margin-top:12px; width:100%; font:inherit; font-size:.89rem; font-weight:800;
  color:var(--teal-ink,#062b32); background:var(--wb-accent);
  border:0; border-radius:999px; padding:12px 18px; cursor:pointer;
  transition:filter .18s, transform .18s;
}
.wb-submit:hover:not(:disabled){filter:brightness(1.06); transform:translateY(-1px)}
.wb-submit:focus-visible{outline:3px solid var(--wb-on-panel); outline-offset:2px}
.wb-submit:disabled{opacity:.6; cursor:progress; transform:none}

.wb-error{font-size:.74rem; line-height:1.4; color:#ffb9a8; margin:9px 0 0; min-height:0}

/* ---------- 4. Confirmacion ---------- */
/* Ya descargado: la promesa sobra, el unico titular es la confirmacion. */
.wb-panel.--done .wb-panel-title{display:none}
.wb-panel.--done .wb-panel-head{margin-bottom:18px}

.wb-done{display:grid; gap:6px; padding:6px 0 4px; text-align:left}
.wb-done h3{font-family:'ElCamino','Figtree',sans-serif; text-transform:uppercase;
  font-size:1.34rem; line-height:.96; letter-spacing:.3px; margin:0 0 2px}
.wb-overlay .wb-done h3{font-size:1.62rem}
.wb-done p{font-size:.82rem; line-height:1.5; color:rgba(245,235,226,.78); margin:0}
.wb-done > p a{color:var(--wb-accent); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* Continuidad: el regalo no termina en un callejon sin salida. Discreto a
   proposito, para no convertir la descarga en un embudo de venta. */
.wb-next{margin-top:16px; padding-top:14px; border-top:1px solid rgba(245,235,226,.16); display:grid; gap:8px}
.wb-next-lead{font-size:.74rem; color:rgba(245,235,226,.55); margin:0 0 2px}
.wb-next-a{
  display:block; font-size:.84rem; font-weight:600; color:var(--wb-on-panel);
  text-decoration:none; padding:9px 14px; border-radius:10px;
  border:1px solid rgba(245,235,226,.22); transition:background .18s, border-color .18s;
}
.wb-next-a:hover{background:rgba(245,235,226,.09); border-color:rgba(245,235,226,.4)}
.wb-next-a:focus-visible{outline:2px solid var(--wb-accent); outline-offset:2px}
.wb-next-a.--primary{background:rgba(245,235,226,.12); border-color:rgba(245,235,226,.34); font-weight:700}
.wb-next-a.--primary:hover{background:rgba(245,235,226,.2)}

/* ---------- 5. Popup del home ---------- */
.wb-overlay{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
  background:rgba(6,43,50,.62); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s ease;
}
.wb-overlay.--in{opacity:1}
.wb-overlay[hidden]{display:none !important}
.wb-overlay .wb-panel{
  width:min(392px, 100%); margin-top:72px; padding-bottom:26px;
  transform:translateY(16px) scale(.97); transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.wb-overlay.--in .wb-panel{transform:none}
.wb-overlay .wb-panel-head .wb-cover{width:116px}
.wb-overlay .wb-panel-title{font-size:1.62rem}

/* ---------- Responsive ---------- */
@media (max-width:600px){
  /* Sin ancho completo: el widget de ansiedad vive en la esquina derecha
     (avatar de 54px + 16px de margen) y no deben solaparse. */
  .wb{--wb-gap:14px}
  .wb-rest{max-width:calc(100vw - 106px); padding:10px 16px 10px 11px}
  .wb-rest .wb-cover{width:46px; flex:0 0 46px; margin-top:-20px}
  .wb-rest-t{font-size:.81rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .wb-rest-s{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .wb-panel{width:100%}
  .wb-overlay{padding:14px; align-items:end}
  .wb-overlay .wb-panel{margin-top:62px}
}
@media (max-height:620px){
  .wb-overlay{align-items:start; overflow-y:auto}
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  .wb, .wb-rest, .wb-rest .wb-cover, .wb-overlay, .wb-overlay .wb-panel, .wb-rest-x{transition:none !important}
  .wb{transform:none}
  .wb-rest:hover{transform:none}
}
@media (prefers-contrast:more){
  .wb-rest-s, .wb-lead, .wb-note, .wb-check{color:var(--wb-on-panel)}
}

/* ---------- 6. Select propio ---------- */
/* El nativo se dibuja con el estilo del sistema y rompe el panel. */
.wb-select{position:relative}
.wb-select-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font:inherit; font-size:.87rem; color:var(--ink,#24201E); text-align:left;
  background:var(--paper,#FBF6EF); border:1.5px solid transparent; border-radius:10px;
  padding:9px 12px; cursor:pointer; transition:border-color .18s, box-shadow .18s;
}
.wb-select-btn:hover{border-color:rgba(36,32,30,.16)}
.wb-select-btn:focus-visible{outline:none; border-color:var(--wb-accent); box-shadow:0 0 0 3px rgba(255,218,142,.28)}
.wb-select-btn[aria-expanded="true"]{border-color:var(--wb-accent); box-shadow:0 0 0 3px rgba(255,218,142,.28)}
.wb-select-value{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wb-select-value.--ph{color:rgba(36,32,30,.5)}
.wb-select-caret{width:12px; height:8px; flex:none; transition:transform .2s}
.wb-select-btn[aria-expanded="true"] .wb-select-caret{transform:rotate(180deg)}

.wb-select-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:5;
  margin:0; padding:5px; list-style:none; max-height:184px; overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--paper,#FBF6EF); border-radius:12px;
  box-shadow:0 2px 0 rgba(36,32,30,.06), 0 18px 40px -12px rgba(6,43,50,.55);
}
.wb-select.--up .wb-select-list{top:auto; bottom:calc(100% + 6px)}
.wb-select-list[hidden]{display:none}
.wb-select-list li{
  padding:8px 12px; border-radius:8px; font-size:.87rem; color:var(--ink,#24201E);
  cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.wb-select-list li:first-child{color:rgba(36,32,30,.5)}
.wb-select-list li.--on{background:rgba(0,88,104,.1)}
.wb-select-list li.--is-sel{font-weight:700; color:var(--teal,#005868)}
.wb-select-list li.--is-sel::after{
  content:""; width:13px; height:13px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4 5.6 10.4 11.5 3.8' fill='none' stroke='%23005868' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.wb-select-list li:first-child.--is-sel::after{display:none}

@media (prefers-reduced-motion:reduce){
  .wb-select-caret{transition:none}
}