/* ============================================================
   HERMANDIA · «La IA al servicio de las Hermandades»
   Charla de la II Feria Cofrade · Córdoba, 16-10-2026
   Se apoya en styles.css (la presentación comercial) y añade
   las piezas propias de esta charla.
   ============================================================ */

/* ---------- Sello numerado: el acento va en el número, torcido ---------- */
.sello {
  display: inline-grid; place-items: center;
  min-width: 46px; height: 46px; padding: 0 8px;
  border-radius: 12px;
  font-weight: 800; font-size: 19px; letter-spacing: .02em;
  color: var(--brown-950);
  transform: rotate(-6deg);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.7);
}
.sello.s1 { background: #f4c542; }
.sello.s2 { background: #e8a87c; }
.sello.s3 { background: #b9d38a; }
.sello.s4 { background: #9cc7e0; }
.sello.s5 { background: #e0a3b8; }
.sello.s6 { background: #c9b2e3; }
.sello.s7 { background: #f0d08c; }
.sello.s8 { background: #a8dccb; }
.sello.sm { min-width: 34px; height: 34px; font-size: 14px; border-radius: 9px; }

.uso-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.uso-head .eyebrow { margin: 0; }

/* ---------- Portada ---------- */
.cover .ev-line {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin-top: 14px; font-size: 14px; color: var(--muted); letter-spacing: .02em;
}
.cover .ev-line b { color: var(--gold-soft); font-weight: 600; }
.cover .ev-line i { font-style: normal; opacity: .5; }

/* ---------- Qué es (y qué no) ---------- */
.esno { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.esno article {
  background: var(--grad-panel);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
}
.esno h3 { font-size: 17px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.esno h3 .sello { transform: rotate(-6deg) scale(.86); }
.esno ul { list-style: none; display: grid; gap: 10px; }
.esno li { font-size: 14px; line-height: 1.5; color: var(--cream-dim); padding-left: 22px; position: relative; }
.esno li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-bright); font-weight: 700; }
.esno .no li::before { content: "✕"; color: #e2a06b; }
.esno li b { color: var(--cream); }

/* ---------- Mapa de usos (tarjetas que giran, con sello) ---------- */
.mapa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mapa .flip { min-height: 178px; }
.mapa .flip-face { align-items: flex-start; text-align: left; gap: 8px; }
.mapa .flip-face .sello { margin-bottom: 4px; }
.mapa .flip-face b { font-size: 15.5px; }
.mapa .flip-face small { font-size: 12.5px; line-height: 1.45; }
.mapa .flip-face .ir { margin-top: auto; font-size: 11px; color: var(--gold-soft); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 1100px) { .mapa { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .mapa { grid-template-columns: 1fr; } .mapa .flip { min-height: 150px; } }

/* ---------- Pantallas de uso: pídeselo así ---------- */
.pidelo { margin-top: 16px; }
.pidelo .ask-lbl { display: block; margin-bottom: 8px; }
.pidelo .ej {
  display: block; width: 100%; text-align: left;
  margin-bottom: 8px; padding: 11px 14px 11px 40px;
  position: relative;
  font: inherit; font-size: 13.5px; line-height: 1.4; color: var(--cream);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.pidelo .ej::before {
  content: "❝"; position: absolute; left: 14px; top: 9px;
  color: var(--gold); font-size: 17px; line-height: 1;
}
.pidelo .ej:hover { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.45); transform: translateX(4px); }
.pidelo .ej.live { background: rgba(212,175,55,.16); border-color: var(--gold); }
.pidelo .ej.used::after { content: "✓"; position: absolute; right: 12px; top: 10px; color: var(--gold-soft); font-size: 12px; }

.gana { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gana li {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(212,175,55,.12); color: var(--gold-soft);
}

.demo .chat-body { min-height: 300px; }
.demo .cap-video video { aspect-ratio: 16 / 9; object-fit: contain; }
.msg.bot ul, .msg.bot ol { margin: 6px 0 2px 18px; }
.msg.bot li { margin: 3px 0; }
.msg.bot .ficha {
  display: block; margin-top: 10px; padding: 10px 12px;
  border-radius: 10px; background: rgba(255,255,255,.06);
  border: 1px dashed rgba(212,175,55,.5);
  font-size: 12.5px;
}
.msg.bot .ficha .bt {
  display: inline-block; margin: 8px 6px 0 0; padding: 5px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
}
.msg.bot .ficha .bt.ok { background: var(--grad-gold); color: var(--brown-950); }
.msg.bot .ficha .bt.no { background: rgba(255,255,255,.1); color: var(--cream); }

/* ---------- Más allá del programa: pídeselo / te devuelve ---------- */
.pareja { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; align-items: stretch; }
.pareja .pd {
  background: var(--grad-panel);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.pareja .pd > small {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.pareja .pd p, .pareja .pd li { font-size: 13.5px; line-height: 1.55; color: var(--cream-dim); }
.pareja .pd ul { list-style: none; display: grid; gap: 6px; }
.pareja .pd li b, .pareja .pd p b { color: var(--cream); }
.pareja .prompt p { font-style: italic; }
.pareja .ojo { margin-top: auto; padding-top: 8px; font-size: 12.5px !important; color: #e8b48c !important; }
.manuscrito {
  font-family: 'IM Fell DW Pica', Georgia, serif; font-style: italic;
  font-size: 15px !important; line-height: 1.6 !important;
  color: #3a2418 !important;
  background: linear-gradient(160deg, #efe2c4, #e2cfa6);
  border-radius: 8px; padding: 12px 14px;
  box-shadow: inset 0 0 30px rgba(120,80,30,.35);
  transform: rotate(-.6deg);
}
.foto-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.foto-par figure { margin: 0; }
.foto-par figcaption { font-size: 11px; color: var(--muted); margin-top: 5px; text-align: center; }
.foto-par svg { width: 100%; height: auto; border-radius: 8px; display: block; }
@media (max-width: 900px) { .pareja { grid-template-columns: 1fr; } }

/* ---------- Con cuidado: semáforo ---------- */
.semaforo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.semaforo article {
  background: var(--grad-panel);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.semaforo h3 { font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.semaforo .luz { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.semaforo .verde .luz { background: #8fe0ad; box-shadow: 0 0 14px #8fe0ad; }
.semaforo .rojo .luz  { background: #ef8a6a; box-shadow: 0 0 14px #ef8a6a; }
.semaforo ul { list-style: none; display: grid; gap: 9px; }
.semaforo li { font-size: 13.5px; line-height: 1.5; color: var(--cream-dim); }
.semaforo li b { color: var(--cream); }
.ley {
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.ley span {
  font-size: 12px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: var(--cream-dim);
}
.ley span b { color: var(--gold-soft); }
@media (max-width: 900px) { .semaforo { grid-template-columns: 1fr; } }

/* ---------- Cómo empezar: cinco pasos ---------- */
.pasos5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: p; }
.pasos5 .p5 {
  background: var(--grad-panel);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-sm);
  padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.pasos5 .sello { align-self: flex-start; }
.pasos5 b { font-size: 15px; }
.pasos5 span.tx { font-size: 13px; line-height: 1.5; color: var(--cream-dim); }
.pasos5 .ej5 { margin-top: auto; padding-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--gold-soft); font-style: italic; }
@media (max-width: 1100px) { .pasos5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pasos5 { grid-template-columns: 1fr; } }

/* ---------- Galería de vídeos ---------- */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.galeria button {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--grad-panel);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-sm);
  padding: 0; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.galeria button:hover { transform: translateY(-4px); border-color: rgba(212,175,55,.5); }
.galeria img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: right bottom; display: block; }
.galeria .gt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; }
.galeria .gt small { margin-left: auto; font-weight: 500; color: var(--muted); font-size: 11.5px; }
@media (max-width: 1000px) { .galeria { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .galeria { grid-template-columns: 1fr; } }

.visor {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(14,7,3,.92);
  backdrop-filter: blur(6px);
  padding: 4vh 4vw;
}
.visor[hidden] { display: none; }
.visor video { width: min(100%, 1600px); max-height: 82vh; background: #000; border-radius: 12px; }
.visor .vt { margin-top: 12px; text-align: center; color: var(--cream-dim); font-size: 14px; }
.visor .vt b { color: var(--gold-soft); }
.visor-close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer; font-size: 18px;
  background: rgba(255,255,255,.1); color: var(--cream);
}
.visor-close:hover { background: rgba(212,175,55,.3); }

.center-note { text-align: center; margin-top: 16px; }
.fineprint.center { text-align: center; }

/* «Qué es»: más sitio para las dos columnas */
.split.queesno { grid-template-columns: .8fr 1.2fr; }
.queesno .esno li { font-size: 14.5px; }
@media (max-width: 1080px) { .split.queesno { grid-template-columns: 1fr; } }
@media (max-width: 720px)  { .esno { grid-template-columns: 1fr; } }

.hero-stats.izq { justify-content: flex-start; margin-top: 18px; }

/* ---------- Chat gratuito frente a herramienta con contrato ---------- */
.tabla-comp {
  display: grid; grid-template-columns: 1.05fr 1.2fr 1fr 1fr; gap: 6px;
  font-size: 13px; line-height: 1.4;
}
.tabla-comp > div {
  padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04); color: var(--cream-dim);
}
.tabla-comp .tc-h { background: none; padding-bottom: 4px; }
.tabla-comp .tc-h b { display: block; font-size: 14px; color: var(--cream); }
.tabla-comp .tc-h small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tabla-comp .tc-h.mal b::before  { content: "●  "; color: #ef8a6a; }
.tabla-comp .tc-h.med b::before  { content: "●  "; color: #f0d08c; }
.tabla-comp .tc-h.bien b::before { content: "●  "; color: #8fe0ad; }
.tabla-comp .tc-r { background: none; color: var(--cream); font-weight: 600; }
.tabla-comp > .mal  { background: rgba(239,138,106,.10); }
.tabla-comp > .med  { background: rgba(240,208,140,.07); }
.tabla-comp > .bien { background: rgba(143,224,173,.09); }
.tabla-comp > .mal b { color: #ffb59c; }
@media (max-width: 900px) {
  .tabla-comp { grid-template-columns: 1fr 1fr 1fr; font-size: 12px; }
  .tabla-comp .tc-r { grid-column: 1 / -1; padding-bottom: 0; }
  .tabla-comp .tc-h:first-child { display: none; }
}

/* ---------- Riesgos con casos ---------- */
.riesgos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.riesgos article {
  background: var(--grad-panel);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-sm);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.riesgos .sello { align-self: flex-start; }
.riesgos b { font-size: 15px; }
.riesgos .tx { font-size: 12.8px; line-height: 1.5; color: var(--cream-dim); }
.riesgos .tx b { font-size: inherit; color: var(--cream); }
.riesgos .caso { margin-top: auto; padding-top: 6px; font-size: 12px; line-height: 1.45; color: var(--gold-soft); font-style: italic; }
@media (max-width: 1000px) { .riesgos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .riesgos { grid-template-columns: 1fr; } }

/* ---------- Fuentes ---------- */
.fuentes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.fuentes ul { list-style: none; display: grid; gap: 8px; align-content: start; }
.fuentes li { font-size: 13px; line-height: 1.45; color: var(--cream-dim); padding-left: 14px; position: relative; }
.fuentes li::before { content: "·"; position: absolute; left: 2px; color: var(--gold); font-weight: 700; }
.fuentes li b { color: var(--cream); }
@media (max-width: 800px) { .fuentes { grid-template-columns: 1fr; } }

/* el contexto lleva cifras y tres columnas */
.trio .tcol li b { color: var(--gold-soft); }

/* con 19 pantallas la barra superior no cabe: se navega con el índice lateral y la tecla O */
.topnav { display: none !important; }