/* Gemelas de talla — la reseña de la portada y la demostración Pruébalo aquí. Usa los tokens de estilos.css. */

/* ---------- El color de Gemelas: terracota (cada producto tiene su acento; 2026-10-08) ----------
   Los nombres --wine* vienen de estilos.css, que es igual en los tres sitios: aquí solo cambia el valor.
   Contraste del texto blanco sobre el acento: 6,6 a 1. */
:root {
  --wine: #9a4128;
  --wine-deep: #7c3320;
  --wine-wash: #f8e8e1;
}
.preguntas summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%239a4128' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 3v12M3 9h12'/%3E%3C/svg%3E");
}

/* ---------- Piezas compartidas con ¿Me queda? (copiadas de su disena.css) ---------- */
.gemelas-tarjeta {
  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.1rem 1.1rem 1.2rem;
  display: grid; gap: 1.1rem;
}
.paso-n {
  display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; flex: none;
  background: var(--wine); color: #fff; font-size: 0.82rem; font-weight: 750;
}
.editor-opciones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.editor-opcion { position: relative; }
.editor-opcion input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.editor-opcion span {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.4em 0.85em; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); font-size: 0.9rem; font-weight: 500;
}
.editor-opcion input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.editor-opcion input:focus-visible + span { outline: 2px solid var(--wine); outline-offset: 2px; }
.ir-ejemplo { margin: 0.9rem 0 0; text-align: center; }
.ir-ejemplo .boton { display: inline-flex; align-items: center; gap: 0.45em; text-decoration: none; padding: 0.65em 1.2em; }
.ir-ejemplo svg { width: 16px; height: 16px; }
.editor-bloque { display: grid; gap: 0.55rem; }
.editor-pregunta { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-weight: 700; font-size: 1.08rem; }
.editor-ayuda { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.editor-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.8rem, 1fr)); gap: 0.6rem; }
.campo { display: grid; gap: 0.25rem; align-content: end; }
.campo span { font-weight: 600; font-size: 0.9rem; }
.campo small { display: block; font-size: 0.74rem; font-weight: 500; color: var(--ink-soft); }
.campo input {
  width: 100%; font: inherit; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink);
  padding: 0.45em 0.6em; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
}
.campo input:focus { outline: 2px solid var(--wine); outline-offset: 1px; }

/* ---------- La reseña de la portada ---------- */
.tarjeta--resena { display: grid; gap: 0.7rem; }
.tarjeta--resena .tarjeta-app { margin: 0; }
.resena-quien { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; }
.resena-quien p { margin: 0; line-height: 1.25; }
.resena-quien b { display: block; font-weight: 700; font-size: 0.98rem; }
.resena-quien small { display: block; color: var(--ink-soft); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--wine-wash); color: var(--wine); display: grid; place-items: center; }
.avatar svg { width: 22px; height: 22px; }
.parecido {
  padding: 0.3em 0.7em; border-radius: 999px; background: var(--wine); color: #fff;
  font-weight: 750; font-size: 0.95rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.resena-texto { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.resena-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.resena-chips li {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.28em 0.7em; border-radius: 999px; background: var(--paper-deep);
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.resena-chips svg { width: 12px; height: 12px; }
.resena-chips .chip-ok { background: var(--wine-wash); color: var(--wine); }
.resena-chips .chip-no { background: #fff; color: var(--wine); box-shadow: inset 0 0 0 1px var(--wine); }

/* En tableta la foto es 2:1 y las caras quedan a la derecha: la tarjeta va a la izquierda */
@media (min-width: 760px) and (max-width: 1023px) {
  .escena--gemelas .tarjeta { margin: -19% auto 0 3%; }
}

/* En computador el nombre es más largo que el de ¿Me queda?: puede ir en dos líneas */
@media (min-width: 1024px) {
  .portada h1 { white-space: normal; font-size: clamp(3.6rem, 1rem + 3.9vw, 5.4rem); }
}

/* ---------- Las pantallas de Así de fácil ---------- */
.mini-avatar { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; background: var(--wine-wash); color: var(--wine); display: grid; place-items: center; }
.mini-avatar svg { width: 28px; height: 28px; }
.mini-gemelas li { align-items: center; gap: 0.45rem; }
.mini-gemelas li span:nth-child(2) { flex: 1; }
.mini-gemelas b { color: var(--wine); }
.mini-cara { width: 22px; height: 22px; border-radius: 50%; background: var(--wine-wash); color: var(--wine); display: grid; place-items: center; flex: none; }
.mini-cara svg { width: 14px; height: 14px; }

/* ---------- Pruébalo aquí: tus medidas, la prenda y tus gemelas ---------- */
.gemelas { max-width: 980px; margin: 0 auto; }
.editor-campos--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.resenas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.resena {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 0.8rem;
  padding: 0.85rem 0.9rem; border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--line);
}
.resena .parecido { grid-row: 1 / span 2; align-self: start; text-align: center; line-height: 1.1; }
.resena .parecido small { display: block; font-size: 0.66rem; font-weight: 600; opacity: 0.85; }
.resena-prenda { margin: 0; font-weight: 700; }
.resena-prenda small { display: block; font-weight: 500; font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.resena .resena-texto, .resena .resena-chips { grid-column: 2; }
@media (min-width: 760px) {
  .gemelas-tarjeta { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; padding: 1.6rem; gap: 1.4rem 2.2rem; }
  .gemelas-bloque--medidas { grid-column: 1; grid-row: 1; }
  .gemelas-bloque--prenda { grid-column: 1; grid-row: 2; }
  .gemelas-bloque--lista { grid-column: 2; grid-row: 1 / span 3; }
}