*{box-sizing:border-box}html,body{margin:0;background:#030303;color:#e8e2d8;font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;min-height:100%}
body{
background-color:#030303;
background-image:
linear-gradient(to bottom,rgba(3,3,3,.08) 0%,rgba(3,3,3,.22) 34%,#030303 78%),
url("fondo.jpg");
background-position:top center,top center;
background-size:100% auto,100% auto;
background-repeat:no-repeat,no-repeat
}
main{min-height:100vh;display:flex;flex-direction:column;padding:34px 5vw 28px}
header{position:absolute;top:30px;left:5vw}.brand{font:700 clamp(32px,4vw,58px)/.95 "Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;letter-spacing:-2px}.brand b{color:#df1728}.by{font:11px "Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;letter-spacing:5px;margin-top:12px;color:#999}
.stage{margin:auto;text-align:center;width:min(900px,92vw);padding:105px 0 55px}.eyebrow{font:12px "Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;letter-spacing:7px;color:#777;margin-bottom:24px}
h1{font-size:clamp(42px,6vw,78px);font-weight:400;margin:0 0 34px;letter-spacing:-2px}
#timer{font:18px "Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;letter-spacing:5px;color:#bbb;margin-bottom:30px}
.record{width:118px;height:118px;border-radius:50%;border:2px solid #eee;background:#df1728;box-shadow:0 0 0 12px #111,0 0 42px 8px rgba(223,23,40,.42);cursor:pointer;color:white;transition:.2s}
.record:hover{transform:scale(1.03)}.record.live{animation:pulse 1.2s infinite}.mic{font-size:38px;line-height:1}
@keyframes pulse{
0%,100%{box-shadow:0 0 0 12px #111,0 0 30px 6px rgba(223,23,40,.38)}
50%{box-shadow:0 0 0 17px rgba(90,8,16,.72),0 0 78px 24px rgba(223,23,40,.78)}
}
.status{font:14px "Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;letter-spacing:5px;margin-top:30px}.limit{color:#777;font-size:15px;margin-top:8px}
.review{margin:28px auto 0;width:min(540px,100%)}audio{width:100%;filter:grayscale(1)}.actions{display:flex;justify-content:center;gap:12px;margin:18px 0}
.actions button{border:1px solid #555;background:transparent;color:#eee;padding:12px 26px;letter-spacing:2px;cursor:pointer}.actions .send{background:#df1728;border-color:#df1728}
.consent{display:block;text-align:left;color:#aaa;font:13px/1.65 "Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif}.consent input{margin-right:8px}.message{min-height:24px;margin-top:16px;color:#bbb}
.success{margin:18px auto 0;width:min(620px,100%);font:16px/1.65 "Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;color:#aaa}
.success-title{font:700 22px/1.2 "Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;letter-spacing:4px;color:#eee;margin-bottom:18px}
.success p{margin:8px 0}
.hidden{display:none}
footer{border-top:1px solid #242424;padding-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:45px;color:#777;font:12px/1.55 "Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif}
footer strong{color:#bbb;font-size:11px;letter-spacing:2px}
@media(max-width:700px){main{padding-top:22px}header{position:static}.stage{padding:90px 0 55px}footer{grid-template-columns:1fr;gap:18px}h1{font-size:46px}.brand{font-size:38px}}

/* Transiciones entre los tres estados: grabación, revisión y agradecimiento */
.screen-panel{
  opacity:1;
  transform:translateY(0);
  transition:opacity .22s ease,transform .22s ease;
}
.screen-panel.is-leaving{
  opacity:0;
  transform:translateY(-8px);
}
.screen-panel.is-visible{
  animation:screenIn .34s ease both;
}
@keyframes screenIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.screen-panel.hidden{display:none}
.success-note{
  margin-top:18px!important;
  padding-top:16px;
  border-top:1px solid #252525;
  color:#777;
  font-size:13px;
  line-height:1.6;
}


/* v4 — tipografía y color */
html,body,button,input,audio{font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif}
body,.by,.eyebrow,h1,#timer,.status,.limit,.review,.consent,.message,
.success,.success-title,.success-note,footer,footer strong,.actions button{
  color:#fff;
}
.brand,.brand b{color:#fff}
.consent,.success-note,footer{opacity:.86}
.limit,.by,.eyebrow{opacity:.82}


/* v5 — jerarquía tipográfica */
html,body,button,input,audio{
  font-family:"Roboto",Arial,sans-serif;
}
body,.by,.eyebrow,#timer,.status,.limit,.review,.consent,.message,
.success,.success-note,footer,footer strong,.actions button{
  font-family:"Roboto",Arial,sans-serif;
}
h1,.brand,.brand b,.success-title{
  font-family:"IM Fell English",Georgia,"Times New Roman",serif;
  font-weight:400;
}
h1{
  letter-spacing:.02em;
}
.brand,.success-title{
  letter-spacing:.04em;
}


/* v6 — legibilidad sobre fondo fotográfico */
body{
  text-shadow:0 2px 5px rgba(0,0,0,.92);
}
h1,.brand,.success-title{
  text-shadow:
    0 2px 4px rgba(0,0,0,1),
    0 4px 12px rgba(0,0,0,.95),
    0 0 24px rgba(0,0,0,.75);
}
button,.record{
  text-shadow:none;
}


/* v7 — ajuste de cabecera y composición */
.eyebrow{
  font-size:14px;
  letter-spacing:6px;
  font-weight:500;
}
main{
  transform:translateY(-24px);
}

/* Un poco menos de presencia para la indicación secundaria */
.limit{
  font-size:12px;
  opacity:.68;
}

@media (max-width:700px){
  .eyebrow{
    font-size:12px;
    letter-spacing:4px;
  }
  main{
    transform:translateY(-14px);
  }
}


/* v8 — reproductor propio y cierre de grabación */
audio#player{
  display:none;
}
.audio-player{
  width:100%;
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  gap:14px;
  padding:12px 15px;
  box-sizing:border-box;
  background:rgba(18,18,18,.82);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(5px);
}
.play-pause{
  width:38px;
  height:38px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font:500 18px/1 "Roboto",Arial,sans-serif;
  padding:0;
}
.seek{
  width:100%;
  accent-color:#e9152b;
  cursor:pointer;
}
.audio-time{
  min-width:82px;
  color:#fff;
  font:400 13px/1 "Roboto",Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.record:disabled{
  cursor:default;
  opacity:.9;
}
@media(max-width:600px){
  .audio-player{
    grid-template-columns:38px 1fr;
    gap:10px;
  }
  .audio-time{
    grid-column:2;
    justify-self:end;
    margin-top:-4px;
  }
}