/* =========================================================================
   LIQUID GLASS — copiado literal de src/styles.css de la app.

   No es un cristal esmerilado cualquiera. Al de Corte le hacen falta las dos
   capas que dan el efecto burbuja, y sin ellas el panel se ve plano y podría
   ser de cualquier marca:

     ::before   un brillo curvo arriba, como la luz sobre una gota
     ::after    un filo cian en el borde inferior derecho

   Si algún día cambia el cristal de la app, se vuelve a copiar de allí. Esta
   hoja es un reflejo, no una versión propia.
   ========================================================================= */

.glass {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.35) 100%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.3),
    0 24px 60px -20px rgba(20,20,50,.18),
    0 8px 24px -8px rgba(20,20,50,.08);
  overflow: hidden;
  padding: clamp(1.5rem, 3.6vw, 2.6rem);
}

.glass::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%);
  border-radius: var(--r-lg) var(--r-lg) 50% 50% / var(--r-lg) var(--r-lg) 100% 100%;
  pointer-events: none;
  opacity: .7;
}

.glass::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0; width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  opacity: .4;
  pointer-events: none;
}

/* El contenido va POR ENCIMA del brillo, o el ::before lo lava. Es la misma
   regla que la app aplica a los hijos directos de sus paneles. */
.glass > * { position: relative; z-index: 2; }

/* ---- Variantes del mismo cristal ---------------------------------------- */

/* Apunte al margen: cristal con un filo de color a la izquierda. */
.apunte {
  position: relative;
  margin: 1.8rem 0 0;
  padding: 1.3rem 1.5rem 1.3rem 1.6rem;
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 36px -18px rgba(20,20,50,.18);
  font-size: .98rem;
  line-height: 1.55;
  color: #2C3140;
  max-width: 62ch;
  overflow: hidden;
}

.apunte::before {
  content: "";
  position: absolute;
  left: 0; top: 14%; bottom: 14%; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 99px;
}

/* Preguntas plegables. Mismo cristal, radio más pequeño porque son piezas
   más bajas y el radio grande las deformaría. */
.faq details {
  position: relative;
  margin-bottom: .7rem;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 28px -16px rgba(20,20,50,.16);
}

.faq details::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 60%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  border-radius: 22px 22px 50% 50% / 22px 22px 100% 100%;
  pointer-events: none;
  opacity: .7;
}

.faq summary {
  position: relative;
  z-index: 2;
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3rem 1.15rem 1.4rem;
  font-weight: 700;
  font-size: 1.02rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.3rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ink-mute);
  transition: transform .2s;
}

.faq details[open] summary::after { content: "−"; }

.faq details p {
  position: relative;
  z-index: 2;
  margin: 0 1.4rem 1.3rem;
  color: #2C3140;
  line-height: 1.65;
  max-width: 62ch;
}

/* La sección va centrada, pero una pregunta con su respuesta centrada se lee
   fatal. El texto vuelve a la izquierda dentro de cada plegable. */
.faq details { text-align: left; }