:root{
  --bg:#0f0f10; --ink:#f3f3f1; --muted:#cfcfcc; --accent:#e0dcd2; --accent-2:#bdb8ad;
  --maxw:min(950px,92vw); --radius:16px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-serif: "Georgia","Times New Roman",serif;
  --font-script: "Segoe Script","Lucida Handwriting","Brush Script MT",cursive;
}

.susurro{
  min-height: 60vh;
  display: grid; place-items: center; position: relative; isolation: isolate; overflow: hidden;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(1200px 500px at 50% 0%, rgba(255,255,255,.065), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, rgba(0,0,0,0) 1px 2px);
  background-blend-mode: overlay, normal, soft-light;
}

.susurro::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 50% 40%, transparent 0 55%, rgba(0,0,0,.45) 100%);
  pointer-events:none; z-index:0;
}

.susurro .panel{
  width: var(--maxw);           /* Puede ser sobrescrito por "Ancho del recuadro" */
  padding: 28px;                /* Ajustable con panel_padding */
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  box-shadow: 0 40px 120px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(2px);
  position: relative; z-index: 1;
  overflow: hidden;             /* para recortar el fondo */
}

/* Fondo del recuadro (imagen/video + overlay) */
.susurro .panel .panel-bg{
  position: absolute; inset: 0; z-index: 0;
}
.susurro .panel .panel-bg img,
.susurro .panel .panel-bg video{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
  filter: brightness(0.98) contrast(1.02) saturate(1.02);
}
.susurro .panel .panel-bg::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-color: transparent; opacity: 0; pointer-events: none;
}

/* Contenido por encima del fondo */
.susurro .lead,
.susurro .chain,
.susurro .controls{
  position: relative; z-index: 2;
}

/* Título */
.susurro .lead{
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.6vw, 52px);
  margin: 0 0 .6rem 0; letter-spacing: .2px;
  color: #f3f3f1; /* ajustable desde controles */
  opacity: .28; filter: blur(3px); /* ajustables desde controles */
  transition: opacity .9s ease, filter 1s ease;
}
.susurro:hover .lead,
.susurro.focus .lead{ opacity:1; filter:blur(0) }

/* Frases */
.susurro .chain{ margin-top: 12px }
.susurro .chain p{
  margin: 12px 0; /* responsive desde controles */
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: .15px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.susurro .chain p.emphasis{ color: var(--accent-2); font-style: italic; }
.susurro .chain p.show{ opacity:1; transform: translateY(0); }
.susurro .chain .script{ font-family: var(--font-script); color: var(--accent); }

/* Controles */
.susurro .controls{ display:flex; gap:8px; margin-top:18px }
.susurro .btn{
  appearance:none; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  color:var(--ink); padding:10px 14px; border-radius:12px; font:500 14px/1 var(--font-sans);
  cursor:pointer; transition:background .3s ease, border-color .3s ease, transform .06s ease;
}
.susurro .btn:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22) }
.susurro .btn:active{ transform: translateY(1px) }

/* Respeto reduce motion (se fuerza vía JS según setting) */
@media (prefers-reduced-motion: reduce){
  .susurro.rm .lead, .susurro.rm .chain p{ transition-duration: 0ms !important; }
}