:root{
  --red:#b10f1c;--red-dark:#7d0711;--black:#111;--ink:#1b1b1b;--muted:#666;--white:#fff;--cream:#fff7ef;--soft:#f4f1ec;--line:#ded8cf;--good:#126b34;--warn:#a36a00;--bad:#a31320;--blue:#1d4ed8;
  --shadow:0 18px 45px rgba(17,17,17,.13);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--soft);color:var(--ink);min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{width:min(1180px,100%);margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 14px 30px}
.hero-v7{position:relative;overflow:hidden;background:var(--black);color:var(--white);border-radius:30px;min-height:215px;display:grid;grid-template-columns:130px 1fr 130px 90px;align-items:center;gap:18px;padding:24px;box-shadow:var(--shadow)}.hero-pattern{position:absolute;inset:0;opacity:.32;background:radial-gradient(circle at 12% 25%,transparent 0 28px,#fff 29px 31px,transparent 32px),radial-gradient(circle at 74% 33%,var(--red) 0 42px,transparent 43px),linear-gradient(135deg,transparent 0 39%,var(--red) 40% 42%,transparent 43%),repeating-linear-gradient(90deg,transparent 0 17px,rgba(255,255,255,.24) 18px 19px)}.hero-copy,.heritage-mini,.hero-badge{position:relative;z-index:1}.eyebrow,.label{margin:0 0 8px;color:var(--red);font-weight:900;letter-spacing:.055em;text-transform:uppercase;font-size:.76rem}.hero-v7 .eyebrow{color:#ffd6da}.hero-copy h1{font-size:clamp(2rem,6vw,4rem);line-height:.94;margin:0 0 12px}.hero-copy p:last-child{margin:0;color:#f2eeee;max-width:650px}.heritage-mini{display:grid;gap:5px;place-items:center}.heritage-mini svg{width:105px;height:auto;filter:drop-shadow(0 12px 15px rgba(0,0,0,.25))}.heritage-mini span{font-weight:900;font-size:.75rem;color:#fff}.hero-badge{width:84px;aspect-ratio:1;border-radius:50%;background:var(--red);display:grid;place-items:center;border:8px solid #fff;box-shadow:inset 0 0 0 6px #111;font-weight:1000}
.nav-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0}.nav-card{border:1px solid var(--line);background:var(--white);border-radius:22px;padding:15px 12px;box-shadow:0 9px 25px rgba(17,17,17,.07);font-weight:950;display:grid;gap:6px;min-height:88px;text-align:left}.nav-card:hover{transform:translateY(-1px)}.nav-card.active{background:var(--red);color:var(--white);border-color:var(--red)}.nav-icon{font-size:1.55rem}.nav-desc{font-weight:700;color:var(--muted);font-size:.82rem}.nav-card.active .nav-desc{color:#fff3f4}
.view-panel{background:var(--white);border:1px solid var(--line);border-radius:30px;box-shadow:0 10px 32px rgba(17,17,17,.08);padding:20px}.section-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}.section-head h2{margin:.1rem 0 .45rem;font-size:clamp(1.5rem,3vw,2.2rem)}.section-head p{margin:0;color:var(--muted);max-width:820px}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 12px;background:var(--cream);color:var(--red-dark);font-weight:900;border:1px solid var(--line)}
.lesson-layout{display:grid;grid-template-columns:330px 1fr;gap:16px}.vocab-sidebar{display:grid;gap:10px;align-self:start}.search-box{display:flex;gap:8px}.search-box input,.chat-input input,.search-wide input{width:100%;border:2px solid var(--line);border-radius:16px;padding:12px 14px;background:#fff}.category-filter{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;font-weight:900}.chip.active{background:var(--black);color:#fff}.word-list{display:grid;gap:8px;max-height:470px;overflow:auto;padding-right:4px}.word-row{border:1px solid var(--line);background:#fff;border-radius:16px;padding:10px;text-align:left;display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:center}.word-row.active{border-color:var(--red);box-shadow:0 0 0 3px rgba(177,15,28,.12)}.word-row strong{display:block}.word-row span{font-size:.85rem;color:var(--muted)}.mini-ill{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--cream);font-size:1.55rem;border:1px solid var(--line)}
.study-card{display:grid;grid-template-columns:1fr 1.15fr;gap:16px}.visual-card{border:1px solid var(--line);border-radius:26px;background:linear-gradient(135deg,#fff,#fff7ef);display:grid;place-items:center;text-align:center;padding:20px;min-height:390px}.big-ill{width:min(250px,90%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff, #fff0e8 65%,#efd7cc);display:grid;place-items:center;font-size:6rem;border:8px solid #fff;box-shadow:0 18px 40px rgba(17,17,17,.12)}.word-title{font-size:clamp(2.2rem,6vw,4rem);margin:18px 0 6px;line-height:1}.word-spanish{font-weight:900;color:var(--muted)}.pron{font-weight:950;color:var(--red-dark);margin-top:8px}.study-controls,.btn-row{display:flex;flex-wrap:wrap;gap:10px}.btn{border:0;border-radius:16px;padding:12px 14px;font-weight:950;background:#fff;color:#111;box-shadow:0 8px 20px rgba(17,17,17,.08)}.btn.primary{background:var(--red);color:#fff}.btn.dark{background:var(--black);color:#fff}.btn.outline{border:2px solid var(--red);color:var(--red-dark);background:#fff}.btn.good{background:var(--good);color:#fff}.btn.warn{background:var(--warn);color:#fff}.btn.bad{background:var(--bad);color:#fff}.explain-card{background:var(--soft);border-radius:24px;padding:16px;border:1px solid var(--line);display:grid;gap:12px}.mode-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.mode{border:0;border-radius:14px;background:#fff;padding:10px;font-weight:900}.mode.active{background:var(--red);color:#fff}.practice-area{background:#fff;border-radius:18px;border:1px solid var(--line);padding:14px;min-height:150px}.choice-grid{display:grid;gap:8px}.choice{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;text-align:left;font-weight:900}.choice.correct{background:#e8f7ee;border-color:var(--good)}.choice.wrong{background:#fff0f2;border-color:var(--bad)}.feedback{border-radius:16px;border:1px solid var(--line);padding:12px;background:#fff}.feedback.good{background:#effaf3;border-color:#99d3ae}.feedback.warn{background:#fff8e8;border-color:#e5c27c}.feedback.bad{background:#fff1f3;border-color:#e3a2aa}
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.info-card{border:1px solid var(--line);border-radius:24px;background:#fff;padding:16px;box-shadow:0 8px 22px rgba(17,17,17,.06)}.info-card h3{margin:.2rem 0 .5rem}.info-card p{color:var(--muted)}.rule-example{background:var(--soft);border-radius:16px;padding:12px;margin-top:10px}.rule-example strong{display:block}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.conversation-room{display:grid;gap:14px}.conversation-top{display:grid;grid-template-columns:1fr 310px;gap:16px;align-items:stretch;background:linear-gradient(135deg,#fff,#fff7ef);border:1px solid var(--line);border-radius:28px;padding:18px}.topic-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.topic{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 12px;font-weight:900}.topic.active{background:var(--black);color:#fff}.tutor-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:14px;display:grid;place-items:center;gap:8px;box-shadow:0 12px 30px rgba(17,17,17,.08)}.tutor-portrait{width:230px;max-width:100%;border-radius:28px;background:linear-gradient(160deg,#fff,#fff1e8);border:1px solid var(--line);overflow:hidden;box-shadow:inset 0 0 0 8px #fff}.tutor-portrait svg{display:block;width:100%;height:auto}.tutor-status{font-weight:950;color:var(--red-dark)}.tutor-name{font-weight:1000}.tutor-controls{display:grid;gap:8px;width:100%}.tutor-card.speaking .mouth{animation:talk .26s infinite alternate}.tutor-card.listening{box-shadow:0 0 0 4px rgba(18,107,52,.18),0 12px 30px rgba(17,17,17,.08)}@keyframes talk{from{transform:scaleY(.45);transform-origin:center}to{transform:scaleY(1.7);transform-origin:center}}
.conversation-main{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}.chat-card,.correction-card{border:1px solid var(--line);border-radius:24px;background:#fff;padding:14px}.chat-log{height:360px;overflow:auto;background:var(--soft);border-radius:18px;padding:12px;display:grid;gap:10px}.msg{display:grid;gap:4px;max-width:88%;padding:10px 12px;border-radius:16px}.msg.tutor{background:#fff;border:1px solid var(--line);justify-self:start}.msg.user{background:var(--red);color:#fff;justify-self:end}.msg .smalltext{font-size:.82rem;opacity:.78}.chat-input{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.correction-card{display:grid;gap:10px;align-content:start}.correction-block{background:var(--soft);border-radius:16px;padding:12px;border:1px solid var(--line)}.correction-block strong{display:block;color:#111}.pron-line{color:var(--red-dark);font-weight:900}.status-line{font-weight:900;color:var(--muted)}
.search-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.result-card{border:1px solid var(--line);border-radius:20px;padding:14px;background:#fff;display:grid;gap:8px}.today-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.daily-item{border:1px solid var(--line);background:#fff;border-radius:20px;padding:14px}.daily-item .tag{display:inline-block;border-radius:999px;background:var(--cream);padding:5px 8px;color:var(--red-dark);font-weight:900;font-size:.78rem;margin-bottom:8px}
@media(max-width:960px){.hero-v7{grid-template-columns:85px 1fr 85px;gap:10px}.hero-badge{display:none}.heritage-mini svg{width:78px}.nav-grid{grid-template-columns:repeat(3,1fr)}.lesson-layout,.study-card,.conversation-top,.conversation-main,.two-col{grid-template-columns:1fr}.tutor-card{order:-1}.chat-log{height:300px}.search-results,.module-grid,.today-list{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.app-shell{padding:10px}.hero-v7{grid-template-columns:1fr;text-align:center}.heritage-mini{display:none}.hero-copy h1{font-size:2.15rem}.nav-grid{grid-template-columns:1fr 1fr}.nav-card{min-height:74px}.view-panel{padding:14px}.mode-tabs{grid-template-columns:1fr 1fr}.study-controls,.btn-row{display:grid;grid-template-columns:1fr}.search-results,.module-grid,.today-list{grid-template-columns:1fr}.chat-input{grid-template-columns:1fr}.big-ill{font-size:4.8rem}.visual-card{min-height:320px}}

/* Maxi prueba 9: conversación corregida */
.conversation-room.v8 { gap: 16px; }
.conversation-top.v8-top {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: center;
  background:
    radial-gradient(circle at 75% 18%, rgba(177,15,28,.13), transparent 30%),
    linear-gradient(135deg, #fff, #fff7ef 72%);
  padding: 22px;
}
.conversation-intro h3 { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0 0 10px; line-height: 1.05; }
.conversation-intro p { max-width: 720px; color: var(--muted); font-size: 1.02rem; }
.tutor-card-v8 {
  padding: 16px;
  gap: 10px;
  align-self: stretch;
  justify-content: start;
  background: #fff;
  border: 1px solid rgba(177,15,28,.22);
}
.tutor-realistic {
  width: min(100%, 260px);
  border-radius: 30px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 35px rgba(17,17,17,.11);
  overflow: hidden;
  padding: 0;
}
.tutor-realistic img { display: block; width: 100%; height: auto; }
.tutor-name { font-size: 1.08rem; color: var(--black); }
.tutor-status {
  width: 100%;
  text-align: center;
  border-radius: 999px;
  background: var(--soft);
  color: var(--red-dark);
  padding: 9px 10px;
}
.mic-under-avatar {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 2px;
}
.mic-main {
  font-size: 1.02rem;
  padding: 14px 16px;
  border-radius: 18px;
}
.mic-note {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}
.tutor-card-v8.listening .tutor-status { background: #e8f7ee; color: var(--good); }
.tutor-card-v8.speaking .tutor-status { background: #fff2d6; color: var(--warn); }
.tutor-card.speaking .mouth { animation: talk .20s infinite alternate; }
@media(max-width:960px){
  .conversation-top.v8-top { grid-template-columns: 1fr; }
  .tutor-card-v8 { order: -1; }
  .tutor-realistic { width: min(100%, 230px); }
}


/* Maxi prueba 9: tutora más normal y movimiento de boca muy sutil */
.tutor-real-person {
  background: linear-gradient(160deg,#ffffff,#fff7ef);
  padding: 0;
  border-radius: 30px;
  border: 1px solid rgba(17,17,17,.12);
  box-shadow: 0 16px 36px rgba(17,17,17,.12);
}
.tutor-real-person .real-person-svg {
  display: block;
  width: 100%;
  height: auto;
}
.tutor-card.speaking .mouth,
.tutor-card-v8.speaking .mouth {
  animation: subtleTalk9 .52s ease-in-out infinite alternate !important;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes subtleTalk9 {
  from { transform: translateY(0) scaleY(.96); opacity: .82; }
  to { transform: translateY(1px) scaleY(1.08); opacity: 1; }
}
.tutor-card-v8 {
  align-self: stretch;
}
.mic-under-avatar {
  margin-top: 4px;
}

/* Maxi prueba 11: retrato más limpio, foto reemplazable y sin error no-speech visible */
.tutor-photo-card {
  position: relative;
  width: min(100%, 255px);
  aspect-ratio: 4 / 5;
  padding: 0;
  border-radius: 30px;
  background: linear-gradient(160deg, #fff, #fff7ef);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(17,17,17,.14), inset 0 0 0 10px #fff;
}
.tutor-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
}
.voice-wave {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  display: none;
  gap: 5px;
  align-items: end;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(17,17,17,.72);
  backdrop-filter: blur(6px);
}
.voice-wave span {
  width: 5px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  display: block;
  animation: voicePulse .55s infinite ease-in-out alternate;
}
.voice-wave span:nth-child(2) { animation-delay: .12s; height: 18px; background: #ffd7dc; }
.voice-wave span:nth-child(3) { animation-delay: .24s; height: 10px; }
.tutor-card.speaking .voice-wave { display: flex; }
.tutor-card.speaking .mouth,
.tutor-card-v8.speaking .mouth {
  animation: none !important;
  transform: none !important;
}
@keyframes voicePulse {
  from { transform: scaleY(.55); opacity: .72; }
  to { transform: scaleY(1.35); opacity: 1; }
}
.tutor-card-v8 .tutor-name { margin-top: 2px; }
.tutor-card-v8 .tutor-status { margin-top: 4px; }


/* Maxi prueba 11: opción para cambiar la foto de la tutora */
.avatar-change {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--red-dark);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(17,17,17,.06);
}
.avatar-change:hover { background: var(--cream); }
.tutor-photo-card {
  background: linear-gradient(160deg,#fff,#f7f3ef);
}
.tutor-photo-card img {
  object-position: center 42%;
}
.voice-wave {
  bottom: 18px;
}
.tutor-card-v8 .mic-note::after {
  content: " Puedes cambiar la imagen si quieres probar otra foto.";
}


/* Maxi prueba 12: tutora con la imagen enviada por Maxi, más realista, y boca suave */
.conversation-top.v8-top {
  grid-template-columns: minmax(0, 1fr) 430px;
}
.tutor-card-v8 {
  padding: 18px;
  border-color: rgba(177,15,28,.18);
  background: linear-gradient(180deg,#fff,#fffaf7);
}
.tutor-photo-card.tutor-photo-landscape {
  width: min(100%, 390px);
  aspect-ratio: 709 / 385;
  border-radius: 26px;
  box-shadow: 0 20px 46px rgba(17,17,17,.16);
  border: 1px solid rgba(17,17,17,.12);
  background: #fff;
  overflow: hidden;
}
.tutor-photo-card.tutor-photo-landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: none;
}
.photo-mouth-pulse {
  position: absolute;
  left: 53.6%;
  top: 30.6%;
  width: 20px;
  height: 5px;
  border-radius: 999px;
  background: rgba(177,15,28,.72);
  box-shadow: 0 0 7px rgba(177,15,28,.28);
  transform: translate(-50%,-50%) scaleY(.75);
  opacity: 0;
  pointer-events: none;
}
.tutor-card.speaking .photo-mouth-pulse,
.tutor-card-v8.speaking .photo-mouth-pulse {
  opacity: .72;
  animation: softMouth12 .44s ease-in-out infinite alternate;
}
@keyframes softMouth12 {
  from { transform: translate(-50%,-50%) scaleX(.88) scaleY(.55); opacity: .42; }
  to { transform: translate(-50%,-50%) scaleX(1.08) scaleY(1.22); opacity: .78; }
}
.tutor-card.speaking .voice-wave {
  display: flex;
  bottom: 14px;
}
.tutor-card-v8 .tutor-name {
  font-size: 1.12rem;
}
.tutor-card-v8 .tutor-status {
  font-size: .95rem;
}
.avatar-change::after {
  content: " / usar otra imagen";
}
.tutor-card-v8 .mic-note::after {
  content: " La imagen principal ahora es la tutora que enviaste.";
}
@media(max-width:960px){
  .conversation-top.v8-top { grid-template-columns: 1fr; }
  .tutor-photo-card.tutor-photo-landscape { width: min(100%, 430px); }
}


/* Maxi prueba 13: foto de tutora oficial y tarjeta más elegante */
.tutor-card-v8 { border-color: rgba(177,15,28,.14); box-shadow: 0 14px 32px rgba(17,17,17,.08); }
.tutor-photo-card.tutor-photo-landscape { width: min(100%, 340px); aspect-ratio: 4 / 5; border-radius: 28px; background: #fff; }
.tutor-photo-card.tutor-photo-landscape img { object-fit: cover; object-position: center 18%; }
.photo-mouth-pulse { left: 50.5%; top: 56.2%; width: 52px; height: 10px; background: rgba(125,47,38,.18); box-shadow: 0 0 0 1px rgba(160,77,64,.12), 0 2px 12px rgba(125,47,38,.12); filter: blur(.2px); }
.tutor-card-v8.speaking .photo-mouth-pulse { opacity: .9; animation: softMouth13 .36s ease-in-out infinite alternate; }
@keyframes softMouth13 { from { transform: translate(-50%,-50%) scaleX(.82) scaleY(.62); opacity: .35; } to { transform: translate(-50%,-50%) scaleX(1.02) scaleY(1.12); opacity: .72; } }
.tutor-card-v8 .tutor-name { line-height: 1.25; }
.tutor-card-v8 .mic-note::after { content: " Ahora la foto oficial usa la imagen elegida por Maxi."; }
@media (max-width: 980px) { .tutor-photo-card.tutor-photo-landscape { width: min(100%, 300px); } }


/* Maxi prueba 14: foto correcta de la esposa y pausa del micrófono mientras habla la tutora */
.tutor-card-v8.paused .tutor-status{ background:#eef3ff; color:#234a9b; }
.tutor-photo-card.tutor-photo-landscape { width:min(100%,320px); aspect-ratio: 5 / 6; }
.tutor-photo-card.tutor-photo-landscape img { object-position: center 14%; }
.photo-mouth-pulse { left: 50%; top: 58.2%; width: 58px; height: 11px; background: rgba(162,98,80,.16); box-shadow: 0 0 0 1px rgba(140,79,66,.08), 0 2px 12px rgba(125,47,38,.14); }
.tutor-card-v8 .mic-note::after { content: " La app pausa el micrófono cuando la tutora habla, para que no se responda sola."; }


/* Maxi prueba 17: labios VISIBLES sobre la foto fija.
   Esta versión no intenta lip-sync profesional todavía; busca que el movimiento se note claramente mientras habla. */
.tutor-card-v8.speaking .tutor-photo-card.tutor-photo-landscape img {
  animation: tutorPhotoBreath17 .42s ease-in-out infinite alternate;
  transform-origin: center 58%;
}
@keyframes tutorPhotoBreath17 {
  from { transform: scale(1); }
  to { transform: scale(1.006) translateY(.5px); }
}
.photo-mouth-pulse {
  left: 50%;
  top: 58.1%;
  width: 76px;
  height: 22px;
  border-radius: 999px;
  opacity: 0;
  background: radial-gradient(ellipse at center,
    rgba(28, 8, 6, .92) 0 32%,
    rgba(86, 34, 30, .78) 33% 48%,
    rgba(158, 91, 76, .48) 49% 64%,
    rgba(158, 91, 76, 0) 72%);
  box-shadow: 0 0 0 1px rgba(70,20,16,.12), 0 2px 10px rgba(80,18,14,.22);
  filter: none;
  transform: translate(-50%,-50%) scaleX(.86) scaleY(.18);
  mix-blend-mode: multiply;
}
.photo-mouth-pulse::before,
.photo-mouth-pulse::after {
  content: "";
  position: absolute;
  left: 12%;
  width: 76%;
  height: 7px;
  border-radius: 999px;
  background: rgba(156, 84, 74, .50);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.18);
}
.photo-mouth-pulse::before { top: 2px; transform: translateY(-1px) scaleY(.75); }
.photo-mouth-pulse::after { bottom: 2px; transform: translateY(1px) scaleY(.82); }
.tutor-card-v8.speaking .photo-mouth-pulse,
.tutor-card.speaking .photo-mouth-pulse {
  opacity: .95;
  animation: visibleMouth17 .34s cubic-bezier(.37,.03,.2,1) infinite alternate;
}
@keyframes visibleMouth17 {
  0%   { transform: translate(-50%,-50%) scaleX(.82) scaleY(.20); opacity: .45; }
  35%  { transform: translate(-50%,-50%) scaleX(.95) scaleY(.58); opacity: .72; }
  72%  { transform: translate(-50%,-50%) scaleX(1.03) scaleY(1.05); opacity: .96; }
  100% { transform: translate(-50%,-50%) scaleX(.92) scaleY(.36); opacity: .62; }
}
.tutor-card-v8:not(.speaking) .photo-mouth-pulse {
  animation: none;
  opacity: 0;
}
.tutor-card-v8 .mic-note::after {
  content: " Prueba 17: la boca se marca más visible cuando la tutora habla.";
}


/* Maxi prueba 20: corrección de labios y ajuste fino */
.tutor-photo-card.tutor-photo-landscape { width:min(100%, 400px); aspect-ratio: 4 / 5; }
.tutor-photo-card.tutor-photo-landscape img { object-position: center 15%; }
.photo-mouth-pulse { left: 50%; top: 55.2% !important; width: 84px !important; height: 14px !important; border-radius: 999px; background: rgba(132,63,46,.18) !important; box-shadow: 0 0 0 2px rgba(92,37,26,.08), 0 4px 14px rgba(83,32,22,.14); }
.tutor-card-v8.speaking .photo-mouth-pulse { animation: mouth18 .28s ease-in-out infinite alternate; }
@keyframes mouth18 { from { transform: translate(-50%,-50%) scaleX(.76) scaleY(.58); opacity:.42; } to { transform: translate(-50%,-50%) scaleX(1.02) scaleY(1.18); opacity:.9; } }
.mouth-controls { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.mouth-controls button { border:1px solid var(--border); background:#fff; padding:8px 10px; border-radius:999px; font-weight:700; cursor:pointer; }
.mouth-controls .label { width:100%; font-size:12px; color:var(--muted); margin-top:2px; }


/* Maxi prueba 20: reemplaza el parche café por labios reales recortados de la misma foto */
.photo-mouth-pulse { display:none !important; opacity:0 !important; }
.tutor-photo-card.tutor-photo-landscape { width:min(100%, 400px); aspect-ratio: 4 / 5; }
.tutor-photo-card.tutor-photo-landscape img#tutorPhoto { object-position: center 15%; }
.mouth-patch {
  position:absolute;
  left:var(--mouth-left, 50.4%);
  top:var(--mouth-top, 46.2%);
  width:var(--mouth-width, 118px);
  height:auto;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  pointer-events:none;
  opacity:0;
  filter:saturate(1.03) contrast(1.02);
  mix-blend-mode:normal;
  border:0;
  box-shadow:none;
  z-index:3;
}
.mouth-patch.mouth-closed { opacity:0; }
.mouth-patch.mouth-open { opacity:0; }
.tutor-card-v8.speaking .mouth-patch.mouth-open,
.tutor-card.speaking .mouth-patch.mouth-open {
  opacity:.98;
  animation:naturalMouth19 .24s ease-in-out infinite alternate;
}
@keyframes naturalMouth19 {
  from { transform:translate(-50%,-50%) scaleX(.98) scaleY(.84); filter:saturate(1.02) contrast(1.01); }
  to { transform:translate(-50%,-49%) scaleX(1.03) scaleY(1.14); filter:saturate(1.06) contrast(1.05); }
}
.mouth-controls{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:6px;
  margin:8px 0 4px;
  width:100%;
}
.mouth-controls button{
  border:1px solid rgba(177,15,28,.22);
  background:#fff;
  color:#7d0913;
  border-radius:999px;
  padding:7px 8px;
  font-weight:900;
  cursor:pointer;
}
.mouth-controls button:hover{ background:#fff4f0; }
.tutor-card-v8 .mic-note::after { content:" Prueba 19: la boca usa un recorte real de la foto, no un rectángulo pintado."; }


/* Maxi prueba 20: boca reconstruida sin bloque rectangular */
.photo-mouth-pulse,
.mouth-patch,
.mouth-patch.mouth-open,
.mouth-patch.mouth-closed{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.tutor-photo-card.tutor-photo-landscape{
  width:min(100%, 400px);
  aspect-ratio:4 / 5;
  position:relative;
  overflow:hidden;
}
.tutor-photo-card.tutor-photo-landscape img#tutorPhoto{
  object-fit:cover;
  object-position:center 14%;
  transform:none;
}
.mouth-rig{
  position:absolute;
  left:var(--mouth-left,50.1%);
  top:var(--mouth-top,45.4%);
  width:var(--mouth-width,72px);
  height:var(--mouth-height,18px);
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:.58;
  border-radius:999px;
  overflow:hidden;
  filter:blur(.15px) saturate(.95);
  mix-blend-mode:multiply;
  background:radial-gradient(ellipse at center, rgba(119,64,52,.16) 0 42%, rgba(119,64,52,.06) 55%, transparent 76%);
}
.mouth-upper,
.mouth-lower,
.mouth-opening{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border-radius:999px;
  display:block;
}
.mouth-upper{
  top:12%;
  width:76%;
  height:35%;
  background:linear-gradient(180deg, rgba(132,70,58,.28), rgba(104,42,34,.18));
  clip-path:ellipse(50% 55% at 50% 70%);
}
.mouth-lower{
  bottom:8%;
  width:72%;
  height:38%;
  background:linear-gradient(180deg, rgba(94,36,30,.08), rgba(156,82,66,.25));
  clip-path:ellipse(50% 54% at 50% 30%);
}
.mouth-opening{
  top:48%;
  width:44%;
  height:3px;
  background:rgba(46,16,14,.38);
  box-shadow:0 1px 4px rgba(30,8,6,.16);
  transform:translate(-50%,-50%) scaleY(.65);
}
.tutor-card-v8.speaking .mouth-rig,
.tutor-card.speaking .mouth-rig{
  opacity:.86;
  animation:mouthRig20 .22s ease-in-out infinite alternate;
}
.tutor-card-v8.speaking .mouth-opening,
.tutor-card.speaking .mouth-opening{
  animation:mouthOpen20 .22s ease-in-out infinite alternate;
}
.tutor-card-v8.speaking .mouth-upper,
.tutor-card.speaking .mouth-upper{
  animation:upperLip20 .22s ease-in-out infinite alternate;
}
.tutor-card-v8.speaking .mouth-lower,
.tutor-card.speaking .mouth-lower{
  animation:lowerLip20 .22s ease-in-out infinite alternate;
}
@keyframes mouthRig20{
  from{ transform:translate(-50%,-50%) scaleX(.98) scaleY(.92); }
  to{ transform:translate(-50%,-50%) scaleX(1.02) scaleY(1.12); }
}
@keyframes mouthOpen20{
  from{ width:40%; height:2px; opacity:.32; transform:translate(-50%,-50%) scaleY(.6); }
  to{ width:52%; height:8px; opacity:.74; transform:translate(-50%,-50%) scaleY(1); }
}
@keyframes upperLip20{
  from{ top:14%; }
  to{ top:7%; }
}
@keyframes lowerLip20{
  from{ bottom:9%; }
  to{ bottom:2%; }
}
.tutor-card-v8:not(.speaking) .mouth-rig{ opacity:.38; }
.mouth-controls{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:7px;
  width:100%;
  margin-top:8px;
}
.mouth-controls::before{
  content:'Ajuste fino de boca · Prueba 20';
  grid-column:1 / -1;
  color:#6b5b55;
  font-size:.82rem;
  font-weight:800;
}
.mouth-controls button{
  border:1px solid rgba(177,15,28,.22);
  background:#fff;
  color:var(--red-dark);
  border-radius:999px;
  padding:7px 9px;
  font-weight:900;
  cursor:pointer;
}
.mouth-controls button:hover{ background:#fff4f0; }
@media (max-width: 780px){
  .tutor-photo-card.tutor-photo-landscape{width:min(100%,330px)}
}

/* ===== Prueba 22: boca animada mientras habla (CSS, robusto en todos los navegadores) ===== */
.tutor-photo-card{ --mouth-open:0; }
/* La boca se anima con keyframes SOLO mientras la tarjeta tiene .speaking */
.tutor-card.speaking .mouth-rig,
.tutor-card-v8.speaking .mouth-rig{
  opacity:.9 !important;
  animation:none !important;
}
.tutor-card:not(.speaking) .mouth-rig,
.tutor-card-v8:not(.speaking) .mouth-rig{ opacity:.35; }

/* Apertura realista: la boca se abre hacia abajo (mandíbula) con tamaños irregulares */
.tutor-card.speaking .mouth-opening,
.tutor-card-v8.speaking .mouth-opening{
  top:45% !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,
      rgba(38,12,10,.60) 0 55%, rgba(70,26,22,.32) 74%, transparent 100%) !important;
  box-shadow:0 1px 5px rgba(30,8,6,.20) !important;
  transform:translate(-50%,-50%) !important;
  animation:mouthTalk22 .82s steps(1,end) infinite !important;
}
.tutor-card:not(.speaking) .mouth-opening,
.tutor-card-v8:not(.speaking) .mouth-opening{
  width:38% !important; height:2px !important; opacity:.5;
}
/* Labio inferior baja acompañando la apertura */
.tutor-card.speaking .mouth-lower,
.tutor-card-v8.speaking .mouth-lower{
  animation:lipDrop22 .82s steps(1,end) infinite !important;
}
.tutor-card.speaking .mouth-upper,
.tutor-card-v8.speaking .mouth-upper{
  animation:lipUp22 .82s steps(1,end) infinite !important;
}
/* Secuencia irregular = parece que pronuncia distintas sílabas/vocales */
@keyframes mouthTalk22{
  0%   { width:40%; height:3px; }
  12%  { width:52%; height:12px; }
  24%  { width:44%; height:5px; }
  36%  { width:56%; height:15px; }
  48%  { width:42%; height:4px; }
  60%  { width:50%; height:10px; }
  72%  { width:46%; height:14px; }
  84%  { width:41%; height:3px; }
  100% { width:48%; height:8px; }
}
@keyframes lipDrop22{
  0%{bottom:6%} 12%{bottom:-2%} 24%{bottom:4%} 36%{bottom:-4%}
  48%{bottom:5%} 60%{bottom:-1%} 72%{bottom:-3%} 84%{bottom:6%} 100%{bottom:0%}
}
@keyframes lipUp22{
  0%{top:12%} 12%{top:8%} 24%{top:11%} 36%{top:6%}
  48%{top:12%} 60%{top:9%} 72%{top:7%} 84%{top:12%} 100%{top:9%}
}
/* Respiración/vida sutil mientras habla */
@keyframes tutorBreath22{ from{ transform:scale(1.03); } to{ transform:scale(1.045); } }
.tutor-card.speaking .tutor-photo-card img,
.tutor-card-v8.speaking .tutor-photo-card img{
  animation:tutorBreath22 3.4s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){
  .tutor-card.speaking .tutor-photo-card img,
  .tutor-card-v8.speaking .tutor-photo-card img{ animation:none; }
  .tutor-card.speaking .mouth-opening,
  .tutor-card-v8.speaking .mouth-opening{ animation-duration:1.4s !important; }
}

/* ===== Prueba 22: video-avatar realista (Higgsfield) ===== */
.tutor-video-card video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%;
  display:block;
}
.tutor-video-card .mouth-rig{ display:none !important; }
.tutor-card.speaking .tutor-video-card video,
.tutor-card-v8.speaking .tutor-video-card video{ animation:none !important; }