/* =========================================================
   PREGÚNTALE AL MAESTRO · FRONTEND
   Home + /preguntale-al-maestro
========================================================= */

/* ---------- Home · Hero ---------- */

.maestro-hero-cta{
  display:inline-grid;
  grid-template-areas:"label";
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}

.maestro-hero-cta > span{
  grid-area:label;
  white-space:nowrap;
  text-align:center;
  transition:opacity .12s ease;
}

.maestro-hero-cta-default{
  visibility:visible;
  opacity:1;
}

.maestro-hero-cta-hover{
  visibility:hidden;
  opacity:0;
}

.maestro-hero-cta:hover,
.maestro-hero-cta:focus-visible{
  background:#f8f3e8;
  color:var(--ink);
  border-color:#f8f3e8;
}

.maestro-hero-cta:hover .maestro-hero-cta-default,
.maestro-hero-cta:focus-visible .maestro-hero-cta-default{
  visibility:hidden;
  opacity:0;
}

.maestro-hero-cta:hover .maestro-hero-cta-hover,
.maestro-hero-cta:focus-visible .maestro-hero-cta-hover{
  visibility:visible;
  opacity:1;
}

/* ---------- Home · preguntas editoriales ---------- */

.questions-column .maestro-question-link{
  display:block;
  color:inherit;
  text-decoration:none;
  transition:color .16s ease;
}

.questions-column .maestro-question-link:hover,
.questions-column .maestro-question-link:focus-visible{
  color:var(--wine);
}

.questions-conversation-cta-wrap{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.questions-conversation-cta{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:9px 12px;
  border:1px solid var(--wine);
  color:var(--wine);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background-color .16s ease,color .16s ease;
}

.questions-conversation-cta:hover,
.questions-conversation-cta:focus-visible{
  background:var(--wine);
  color:#fff;
}

/* ---------- Home · entrada inferior ---------- */

.maestro-home-entry-form label{
  display:block;
  margin:0 0 12px;
  font-weight:700;
}

.maestro-home-entry-form textarea{
  min-height:128px;
}

/* La Home abre la conversación; ya no muestra respuesta allí. */
.chat-section .chat-response{
  display:none !important;
}

/* =========================================================
   PÁGINA DE CONVERSACIÓN
========================================================= */

.page-preguntale-maestro main{
  background:var(--bg);
}

.maestro-conversation-page{
  min-height:calc(100vh - 82px);
  padding:72px 0 96px;
}

.maestro-conversation-shell{
  width:min(calc(100% - 40px),1120px);
}

.maestro-conversation-intro{
  max-width:680px;
  margin:0 auto 72px;
  text-align:center;
}

.maestro-conversation-intro .eyebrow{
  color:var(--wine);
}

.maestro-conversation-intro h1{
  margin:.35rem 0 .7rem;
  font-family:var(--serif);
  font-size:clamp(3.5rem,7vw,6.8rem);
  line-height:.9;
  font-weight:400;
  letter-spacing:-.045em;
}

.maestro-conversation-intro p{
  margin:0;
  color:var(--muted);
  font-family:var(--serif);
  font-size:1.2rem;
}

.maestro-voices-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(54px,9vw,140px);
  padding:0 0 16px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
}

.maestro-voices-heading span:last-child{
  text-align:left;
}

.maestro-dialogue{
  padding:28px 0 20px;
}

.maestro-dialogue:empty{
  min-height:54px;
}

.maestro-message{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(54px,9vw,140px);
  margin:0 0 34px;
}

.maestro-message-body{
  max-width:34rem;
  font-size:clamp(1rem,1.25vw,1.16rem);
  line-height:1.72;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.maestro-message-user .maestro-message-body{
  grid-column:1;
}

.maestro-message-assistant .maestro-message-body{
  grid-column:2;
  font-family:var(--serif);
  font-size:clamp(1.16rem,1.6vw,1.42rem);
  line-height:1.58;
}

.maestro-message-assistant.is-thinking .maestro-message-body{
  color:var(--muted);
  font-style:italic;
  font-size:1rem;
}

.maestro-message.is-error .maestro-message-body{
  color:var(--wine);
  font-family:inherit;
  font-size:.95rem;
}

.maestro-composer-wrap{
  position:sticky;
  bottom:0;
  z-index:5;
  margin-top:20px;
  padding:24px 0 12px;
  background:linear-gradient(to bottom,rgba(250,247,240,0),var(--bg) 24%,var(--bg) 100%);
}

.maestro-composer{
  padding-top:26px;
  border-top:1px solid var(--ink);
}

.maestro-composer label{
  display:block;
  margin-bottom:10px;
  font-family:var(--serif);
  font-size:1.12rem;
}

.maestro-composer textarea{
  display:block;
  width:100%;
  min-height:48px;
  max-height:190px;
  padding:7px 0 10px;
  border:0;
  border-bottom:1px solid var(--line);
  outline:0;
  resize:none;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:1.06rem;
  line-height:1.5;
}

.maestro-composer textarea:focus{
  border-bottom-color:var(--ink);
}

.maestro-composer textarea[aria-busy="true"]{
  cursor:wait;
}

.maestro-status{
  min-height:20px;
  margin:8px 0 0;
  color:var(--muted);
  font-size:.78rem;
}

.maestro-start-over{
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid var(--line);
  text-align:center;
}

.maestro-start-over a{
  color:var(--muted);
  font-size:.84rem;
  text-decoration:none;
}

.maestro-start-over a:hover,
.maestro-start-over a:focus-visible{
  color:var(--wine);
  text-decoration:underline;
}

.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (hover:none){
  /*
   * En dispositivos táctiles no existe un hover real.
   * Se mantiene siempre el texto principal, igual que el estado
   * normal de desktop: "Pregúntale al Viejo Maestro".
   */
  .maestro-hero-cta-default,
  .maestro-hero-cta:hover .maestro-hero-cta-default,
  .maestro-hero-cta:focus-visible .maestro-hero-cta-default{
    visibility:visible;
    opacity:1;
  }

  .maestro-hero-cta-hover,
  .maestro-hero-cta:hover .maestro-hero-cta-hover,
  .maestro-hero-cta:focus-visible .maestro-hero-cta-hover{
    visibility:hidden;
    opacity:0;
  }
}

@media(max-width:760px){
  .maestro-conversation-page{
    padding:48px 0 72px;
  }

  .maestro-conversation-shell{
    width:min(calc(100% - 28px),1120px);
  }

  .maestro-conversation-intro{
    margin-bottom:50px;
  }

  .maestro-conversation-intro h1{
    font-size:clamp(3rem,15vw,5rem);
  }

  .maestro-voices-heading{
    grid-template-columns:1fr 1fr;
    column-gap:24px;
    font-size:.64rem;
  }

  .maestro-voices-heading span:last-child{
    text-align:right;
  }

  .maestro-message{
    display:block;
    margin-bottom:30px;
  }

  .maestro-message-body{
    width:82%;
    max-width:none;
  }

  .maestro-message-user .maestro-message-body{
    margin-right:auto;
  }

  .maestro-message-assistant .maestro-message-body{
    margin-left:auto;
    text-align:left;
  }

  .maestro-composer-wrap{
    padding-top:18px;
  }
}

@media(max-width:480px){
  .questions-conversation-cta{
    width:100%;
    justify-content:center;
  }

  .maestro-message-body{
    width:88%;
  }
}

/* =========================================================
   AJUSTES 2026-09-13 · conversación limpia
========================================================= */

/* En escritorio el título se presenta como una sola línea. */
.maestro-conversation-intro{
  max-width:none;
  margin-bottom:64px;
}

.maestro-conversation-intro h1{
  font-size:clamp(3.2rem,5vw,5rem);
  line-height:.96;
  white-space:nowrap;
}

/* El área de escritura forma parte natural del documento.
   No flota sobre la respuesta del Maestro. */
.maestro-composer-wrap{
  position:static;
  z-index:auto;
  margin-top:22px;
  padding:0;
  background:none;
}

/* Primera línea: arriba de “Decile algo…”. */
.maestro-composer{
  padding-top:26px;
  border-top:1px solid var(--ink);
}

.maestro-composer label{
  margin-bottom:10px;
}

/* Segunda línea: debajo del área donde se escribe. */
.maestro-composer textarea{
  min-height:52px;
  padding:7px 0 10px;
  border-bottom:1px solid var(--ink);
}

/* Orientación visible, alineada a la izquierda y con el mismo
   lenguaje visual de “Hablar de otra cosa”. */
.maestro-composer-help{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.35;
  text-align:left;
}

/* Los estados sólo ocupan espacio cuando realmente hay un mensaje. */
.maestro-status{
  min-height:0;
  margin:0;
  color:var(--wine);
  font-size:.84rem;
  line-height:1.35;
}

.maestro-status:not(:empty){
  margin-top:8px;
}

/* Tercera línea + acción final. */
.maestro-start-over{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.maestro-start-over a{
  font-size:.84rem;
}

@media(max-width:760px){
  .maestro-conversation-intro h1{
    white-space:normal;
    font-size:clamp(2.8rem,13vw,4.4rem);
  }

  .maestro-conversation-intro{
    margin-bottom:48px;
  }
}


/* =========================================================
   AJUSTES 2026-09-13 · v6
========================================================= */

/* Home: la frase de entrada funciona como invitación editorial. */
.maestro-home-entry-form label{
  max-width:34rem;
  font-weight:500;
  line-height:1.45;
}

/* La lectura de cada respuesta se posiciona desde JS.
   scroll-margin deja aire por debajo del header. */
.maestro-message-assistant{
  scroll-margin-top:110px;
}

@media(max-width:760px){
  .maestro-message-assistant{
    scroll-margin-top:86px;
  }
}


/* =========================================================
   EXPERIENCIA DE CONVERSACIÓN · v7
   Más separación visual sin convertirla en un "chat".
========================================================= */

.maestro-conversation-shell{
  width:min(calc(100% - 40px),1180px);
}

/* La conversación tiene ahora un lugar propio, como una mesa:
   se distingue del fondo, pero no usa tarjetas ni globos. */
.maestro-dialogue-surface{
  position:relative;
  margin:0 0 34px;
  padding:24px 30px 18px;
  border:1px solid var(--line);
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.34) 49.9%,
      rgba(116,50,40,.035) 50.1%,
      rgba(116,50,40,.035) 100%
    );
}

.maestro-dialogue-surface::after{
  content:"";
  position:absolute;
  top:24px;
  bottom:18px;
  left:50%;
  width:1px;
  background:rgba(82,68,55,.10);
  pointer-events:none;
}

.maestro-dialogue-surface .maestro-voices-heading{
  position:relative;
  z-index:1;
  padding-bottom:14px;
}

.maestro-dialogue-surface .maestro-dialogue{
  position:relative;
  z-index:1;
  padding:28px 0 8px;
}

.maestro-dialogue-surface .maestro-dialogue:empty{
  min-height:74px;
}

/* La zona donde la persona escribe tiene identidad propia. */
.maestro-composer-wrap{
  margin-top:0;
  padding:26px 30px 24px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.46);
}

.maestro-composer{
  padding-top:0;
  border-top:1px solid var(--ink);
}

.maestro-composer label{
  margin:22px 0 10px;
}

.maestro-composer textarea{
  min-height:58px;
  padding:8px 0 12px;
  border-bottom:1px solid var(--ink);
  font-family:var(--sans, Arial, sans-serif);
  font-size:1.02rem;
  font-weight:400;
}

.maestro-composer-actions{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-top:10px;
}

.maestro-composer-help{
  flex:1 1 auto;
  margin:2px 0 0;
  max-width:650px;
}

.maestro-conversation-submit{
  flex:0 0 auto;
  min-height:44px;
  padding:11px 18px;
  border:1px solid var(--wine);
  background:var(--wine);
  color:#fff;
  font:inherit;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}

.maestro-conversation-submit:hover,
.maestro-conversation-submit:focus-visible{
  background:transparent;
  color:var(--wine);
}

.maestro-conversation-submit:disabled{
  opacity:.58;
  cursor:wait;
}

.maestro-start-over{
  margin-top:26px;
}

/* El comienzo de la respuesta debe quedar claramente visible al posicionar. */
.maestro-message-assistant{
  scroll-margin-top:120px;
}

@media(max-width:760px){
  .maestro-conversation-page{
    padding-top:36px;
  }

  .maestro-conversation-shell{
    width:min(calc(100% - 24px),1180px);
  }

  .maestro-conversation-intro{
    margin-bottom:34px;
  }

  .maestro-dialogue-surface{
    padding:18px 18px 10px;
    background:rgba(255,255,255,.34);
  }

  .maestro-dialogue-surface::after{
    display:none;
  }

  .maestro-dialogue-surface .maestro-dialogue{
    padding-top:22px;
  }

  .maestro-composer-wrap{
    padding:22px 18px 20px;
  }

  .maestro-composer textarea{
    min-height:70px;
    font-size:1rem;
    line-height:1.45;
  }

  .maestro-composer-actions{
    display:block;
    padding-top:10px;
  }

  .maestro-composer-help{
    margin:0 0 14px;
    max-width:none;
    font-size:.8rem;
  }

  .maestro-conversation-submit{
    width:100%;
    min-height:50px;
    padding:13px 16px;
    font-size:.8rem;
  }

  .maestro-start-over{
    margin-top:22px;
  }

  .maestro-message-assistant{
    scroll-margin-top:88px;
  }
}