/* =====================================================================
   guia-tallas.css — La guía de tallas de la ficha de producto
   ---------------------------------------------------------------------
   15-oct-2026. Compartido por los dos sitios. NO lleva ni un color ni
   una tipografía escritos a mano: todo sale de las variables de marca
   (--oliva, --font-display, --radius…), así que el mismo componente se
   ve como Limonni en Limonni y como Niccola en Niccola sin duplicar
   código ni mantener dos versiones que se van separando con el tiempo.
   ===================================================================== */

.gt {
  margin: 26px 0 8px;
  padding: 22px clamp(16px, 4vw, 26px) 20px;
  background: var(--paper);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
}

/* Cuando se llega aquí desde "¿Cuál es mi talla?", un pulso breve para
   que se vea a dónde saltó la página. Una sola vez, no en bucle. */
.gt-destacar { animation: gt-pulso 1.5s var(--ease, ease) 1; }
@keyframes gt-pulso {
  0%, 100% { border-color: var(--stone); }
  25%      { border-color: var(--gold-2); }
}
@media (prefers-reduced-motion: reduce) {
  .gt-destacar { animation: none; }
}

.gt-head { margin-bottom: 16px; }
.gt-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 2.4vw, 23px);
  color: var(--black);
  line-height: 1.2;
}
.gt-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

/* ── Calculadora ─────────────────────────────────────────────────── */
.gt-calc {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--stone);
}
.gt-calc-campos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.gt-campo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gt-campo > span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1;
}
.gt-campo input {
  width: 100%;
  padding: 10px 30px 10px 12px;
  font-family: inherit;
  font-size: 15px;            /* 16px o menos hace zoom en iOS; 15 + este padding se lee igual de bien */
  color: var(--black);
  background: var(--linen);
  border: 1px solid var(--stone-2);
  border-radius: var(--radius);
  -moz-appearance: textfield;
}
.gt-campo input::placeholder { color: var(--muted); opacity: .45; }
.gt-campo input::-webkit-outer-spin-button,
.gt-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gt-campo input:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 1px;
  border-color: transparent;
}
.gt-campo > i {
  position: absolute;
  right: 11px;
  bottom: 12px;
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  pointer-events: none;
}
.gt-calc-pista {
  margin: 11px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.gt-calc-pista.is-ok { color: var(--gold-2); }

/* ── Tablas ──────────────────────────────────────────────────────── */
.gt-tablas { display: grid; gap: 22px; }
@media (min-width: 720px) {
  .gt-tablas--doble { grid-template-columns: 1fr 1fr; gap: 26px; }
}

.gt-tabla-title {
  margin: 0 0 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
}
.gt-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.gt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;   /* las cifras alineadas, que es de lo que va una tabla de medidas */
}
.gt-table thead th {
  padding: 0 10px 7px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--stone-2);
  white-space: nowrap;
}
.gt-table thead th:first-child { padding-left: 8px; }
.gt-table tbody th {
  padding: 8px;
  text-align: left;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
}
.gt-table tbody td {
  padding: 8px 10px;
  color: var(--ink);
  white-space: nowrap;
}
.gt-table tbody tr + tr th,
.gt-table tbody tr + tr td { border-top: 1px solid var(--stone); }

/* Talla que el producto no ofrece: se deja a la vista (sirve para
   ubicarse en la escala) pero atenuada, para no hacerle perder el
   tiempo a quien la busque. */
.gt-row--agotada th, .gt-row--agotada td { opacity: .42; }
.gt-nd { font-size: 10px; color: var(--muted); }

/* La fila que corresponde a las medidas escritas. */
.gt-table tbody tr.is-match th,
.gt-table tbody tr.is-match td {
  background: var(--stone);
  color: var(--black);
  opacity: 1;
}
.gt-table tbody tr.is-match th { box-shadow: inset 3px 0 0 var(--gold-2); }

/* ── Resultado + aplicar ─────────────────────────────────────────── */
.gt-resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stone);
}
.gt-resultado[hidden] { display: none; }
.gt-resultado-txt { margin: 0; font-size: 13.5px; color: var(--ink); }
.gt-resultado-talla { font-size: 16px; color: var(--black); }
.gt-resultado-nota { font-size: 12px; color: var(--muted); }

.gt-aplicar {
  padding: 9px 16px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--linen);
  background: var(--black);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur, .2s) var(--ease, ease);
}
.gt-aplicar:hover { background: var(--gold-2); }
.gt-aplicar:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

.gt-pie {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--stone);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 68ch;
}
.gt-pie b { color: var(--ink); font-weight: 600; }

/* =====================================================================
   Selector doble de talla (sets): arriba y abajo
   ===================================================================== */
.talla-set { display: grid; gap: 14px; }
@media (min-width: 560px) {
  .talla-set { grid-template-columns: 1fr 1fr; gap: 18px; }
}
.talla-set-label {
  margin: 0 0 7px;
  font-size: 12px;
  color: var(--muted);
}
.talla-set-label span { color: var(--black); font-weight: 600; }

.talla-set-nota {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.talla-set-nota.is-ok { color: var(--gold-2); }