/* ====== BASE ====== */
:root{
  --bg:#0b0b0b;
  --panel:#111;
  --accent:#ffd300;
  --green:#34d399;
  --red:#ef4444;
  --text:#e9e9e9;
}

html,body{margin:0;padding:0}
body{
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: #fff;
}

/* ====== LAYOUT WRAPPER ====== */
.califica-wrap{
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 16px;
  display: grid;
  gap: 28px;                  /* separación entre columnas */
}
/* Desktop: dos columnas */
@media (min-width: 900px){
  .califica-wrap{
    grid-template-columns: 360px 1fr;
    align-items: start;
  }
}

/* ====== CARD IZQUIERDA ====== */
.contenedor-calificanos{
  background: var(--panel);
  color: #fff;
  padding: 24px 20px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  text-align: center;
}

/* Título dentro del card (si usas h1/h2) */
.contenedor-calificanos h1,
.contenedor-calificanos h2{
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--accent);
}
.contenedor-calificanos p{
  font-size: .95rem;
  line-height: 1.5;
  margin: 0 0 16px;
  color: #cfcfcf;
}

/* Botones del card */
.opciones-respuesta{
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.btn-si,
.btn-no{
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
  text-align: center;
}
.btn-si{ background: var(--green); color:#0b0b0b; }
.btn-no{ background: var(--red);   color:#fff; }
.btn-si:hover, .btn-no:hover{ transform: translateY(-2px); filter: brightness(1.05); }

/* ====== BLOQUE DERECHO ====== */
.info-extra{
  background: var(--panel);
  color: var(--text);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  line-height: 1.65;
}
.info-extra h2{ color: var(--accent); margin: 0 0 10px; font-size: 1.6rem; }
.info-extra h3{ margin: 18px 0 8px; }
.info-extra ul{ padding-left: 20px; margin: 8px 0 16px; }
.info-extra li{ margin-bottom: 8px; }
.info-extra a{ color: var(--accent); text-decoration: underline; }