/* Las rejillas de tarjetas, los planes, el formulario y las preguntas, en el
   estilo Bento. Partido de estilos.css por su razón de cambio: acá vive lo
   que va dentro de la ventana; allá, el marco, el dock y la portada. */

/* ── Qué hace: una rejilla bento ────────────────────────────
   La primera función es la tarjeta grande (2×2) y el resto llena la rejilla
   de a una. Las últimas se estiran para que no quede un hueco al final,
   cuente lo que cuente la lista que escribe el dueño. */
.rejilla {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(170px, auto);
  grid-auto-flow: dense; gap: 14px;
}
.tarjeta {
  background: var(--tarjeta); border-radius: var(--radio-tarjeta); padding: 22px;
  box-shadow: var(--sombra-tarjeta); display: flex; flex-direction: column; min-width: 0;
}
.tarjeta .icono {
  width: 48px; height: 48px; border-radius: 50%; background: var(--gris);
  display: grid; place-items: center; font-size: 22px; margin-bottom: auto; flex: none;
}
.tarjeta h3 { margin: 18px 0 6px; font-size: 18px; line-height: 1.25; }
.tarjeta p { margin: 0; color: var(--suave); font-size: 15px; }
.rejilla > .tarjeta:first-child { grid-column: span 2; grid-row: span 2; padding: 30px; }
.rejilla > .tarjeta:first-child .icono { width: 72px; height: 72px; font-size: 34px; background: var(--claro); }
.rejilla > .tarjeta:first-child h3 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 28px; }
.rejilla > .tarjeta:first-child p { font-size: 17px; max-width: 30em; }
/* La grande tiene aire arriba: dos globos de chat, solo de adorno, como la
   bandeja de la app (uno del cliente, claro; otro de la IA, gris). */
.rejilla > .tarjeta:first-child { position: relative; }
.rejilla > .tarjeta:first-child::before,
.rejilla > .tarjeta:first-child::after {
  content: ""; position: absolute; height: 46px; pointer-events: none;
}
.rejilla > .tarjeta:first-child::before {
  right: 30px; top: 132px; width: 52%; background: var(--claro); border-radius: 23px 23px 6px 23px;
}
.rejilla > .tarjeta:first-child::after {
  left: 30px; top: 194px; width: 62%; background: var(--gris); border-radius: 23px 23px 23px 6px;
}
/* Después de la grande (que ocupa con las cuatro siguientes dos filas) van
   filas de cuatro: la que queda sola ocupa la fila; dos, la mitad cada una;
   tres, la última doble. */
.rejilla > .tarjeta:nth-child(4n+6):last-child { grid-column: span 4; }
.rejilla > .tarjeta:nth-child(4n+6):nth-last-child(2),
.rejilla > .tarjeta:nth-child(4n+7):last-child { grid-column: span 2; }
.rejilla > .tarjeta:nth-child(4n+8):last-child { grid-column: span 2; }
@media (max-width: 900px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .rejilla > .tarjeta:first-child { grid-row: auto; }
  .rejilla > .tarjeta:first-child::before, .rejilla > .tarjeta:first-child::after { display: none; }
  .rejilla > .tarjeta:nth-child(n+2) { grid-column: auto; }
  .rejilla > .tarjeta:nth-child(even):last-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .rejilla { grid-template-columns: 1fr; gap: 10px; }
  .rejilla > .tarjeta:first-child, .rejilla > .tarjeta:nth-child(even):last-child { grid-column: auto; }
  .tarjeta { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 18px; }
  .tarjeta .icono { margin-bottom: 0; }
  .tarjeta h3, .rejilla > .tarjeta:first-child h3 { margin: 0; flex: 1; min-width: 0; font-size: 18px; }
  .tarjeta p { flex-basis: 100%; margin-top: 10px; }
  .rejilla > .tarjeta:first-child { padding: 22px; }
  .rejilla > .tarjeta:first-child .icono { width: 56px; height: 56px; font-size: 26px; }
  .rejilla > .tarjeta:first-child p { font-size: 16px; }
}

/* ── Cómo funciona ──────────────────────────────────────── */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; counter-reset: paso; }
.paso { position: relative; padding: 22px; background: var(--tarjeta); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.paso::before {
  counter-increment: paso; content: counter(paso);
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 16px;
  background: var(--claro); color: var(--tinta); display: grid; place-items: center; font-weight: 800; font-size: 18px;
}
.paso h3 { margin: 0 0 4px; font-size: 18px; }
.paso p { margin: 0; color: var(--suave); font-size: 15px; }

/* ── Planes ─────────────────────────────────────────────── */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column; background: var(--tarjeta); border-radius: var(--radio-dialogo);
  padding: 26px; box-shadow: var(--sombra-tarjeta); position: relative;
}
.plan.destacado { box-shadow: 0 0 0 2px var(--claro), var(--sombra-tarjeta); }
.plan.destacado::before {
  content: "El más elegido"; position: absolute; top: 22px; right: 22px;
  background: var(--claro); color: var(--tinta); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.plan h3 { margin: 0; font-size: 20px; padding-right: 110px; }
.plan:not(.destacado) h3 { padding-right: 0; }
.precio { font-size: 40px; font-weight: 800; margin: 14px 0 2px; letter-spacing: -0.02em; line-height: 1.1; }
.precio small { font-size: 15px; color: var(--suave); font-weight: 600; letter-spacing: 0; }
.precio.consultar { font-size: 26px; }
.cupo {
  align-self: flex-start; background: var(--dialogo); color: var(--suave); font-weight: 600; font-size: 13px;
  padding: 6px 12px; border-radius: 999px; margin: 10px 0 18px;
}
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.plan li { padding: 7px 0 7px 32px; position: relative; font-size: 15px; }
.plan li::before {
  content: "✓"; position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gris); color: var(--verde-b); font-weight: 800; font-size: 12px; display: grid; place-items: center;
}
.plan .boton { width: 100%; }
.aviso-planes { text-align: center; color: var(--suave); font-size: 14px; margin-top: 18px; }

/* ── Comprar ────────────────────────────────────────────── */
.comprar .envoltura { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: start; }
@media (max-width: 900px) { .comprar .envoltura { grid-template-columns: 1fr; gap: 24px; } }
.bajada-compra { color: var(--suave); font-size: 18px; }
.lista-simple { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.lista-simple li {
  position: relative; padding: 12px 16px 12px 52px; background: var(--tarjeta); border-radius: 18px; color: var(--texto-b);
}
.lista-simple li::before {
  content: "✓"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--claro); color: var(--tinta);
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
}
.apagado { color: var(--suave); }

form {
  background: var(--tarjeta); border-radius: var(--radio-dialogo); padding: 26px;
  display: grid; gap: 14px; box-shadow: var(--sombra-tarjeta); min-width: 0;
}
label { font-weight: 600; font-size: 14px; display: grid; gap: 6px; color: var(--texto-b); min-width: 0; }
input, select, textarea {
  font: inherit; font-weight: 500; padding: 12px 16px; border: 1px solid var(--filo-campo); border-radius: 16px;
  background: var(--campo); color: var(--texto-b); width: 100%; min-width: 0;
}
select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%);
  background-position: right 20px center, right 15px center; background-size: 5px 5px; background-repeat: no-repeat;
}
select option { background: var(--dialogo); color: var(--texto-b); }
input::placeholder, textarea::placeholder { color: #8A8A8A; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--claro); box-shadow: 0 0 0 1px var(--claro); }
input[type="date"] { color-scheme: dark; }
input[type="file"] { padding: 8px 10px; color: var(--suave); }
input[type="file"]::file-selector-button {
  border: 0; border-radius: 999px; padding: 7px 14px; margin-right: 10px; font: inherit; font-weight: 700;
  background: var(--claro); color: var(--tinta); cursor: pointer;
}
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .dos { grid-template-columns: 1fr; } form { padding: 20px 16px; } }
form > .boton { width: 100%; padding: 15px 24px; font-size: 16px; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.resultado { border-radius: 16px; padding: 12px 16px; font-weight: 600; display: none; }
.resultado.bien { display: block; background: rgba(110, 231, 160, .14); color: var(--verde-b); }
.resultado.mal { display: block; background: rgba(252, 165, 165, .14); color: var(--rojo-b); }

.notita-form { margin: 0; font-size: 13px; color: var(--suave); text-align: center; }

/* ── Preguntas ──────────────────────────────────────────── */
.preguntas { max-width: 780px; margin-inline: auto; }
details { background: var(--tarjeta); border-radius: var(--radio-tarjeta); padding: 18px 22px; margin-bottom: 10px; }
summary {
  font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--gris);
  display: grid; place-items: center; font-size: 20px; font-weight: 600; transition: transform .2s, background .2s;
}
details[open] summary::after { transform: rotate(45deg); background: var(--claro); color: var(--tinta); }
details p { color: var(--suave); margin: 12px 0 0; white-space: pre-line; }