/*
 * Estilos de la Calculadora de precio — Loobe Moda.
 * Todos los selectores empiezan por .lc- para no interferir con el resto
 * de estilos de Contalfy. Si ya tenéis las fuentes Fraunces / Work Sans
 * cargadas en el proyecto, podéis borrar el @import de abajo.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600;700&display=swap');

.lc-root {
  --lc-ink: #221D19;
  --lc-ink-soft: #35302B;
  --lc-cream: #F6EEE3;
  --lc-cream-dim: #C9BFAF;
  --lc-gold: #C9A467;
  --lc-gold-bright: #E0C083;
  --lc-rose: #D9A79C;
  --lc-line: rgba(246,238,227,0.14);
  --lc-radius: 14px;

  font-family: 'Work Sans', Arial, sans-serif;
  color: var(--lc-cream);
  max-width: 420px;
  margin: 0 auto;
}
.lc-root * { box-sizing: border-box; }

.lc-card {
  background: var(--lc-ink-soft);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  padding: 26px 22px 22px;
  margin-bottom: 16px;
}
@media (prefers-reduced-motion: no-preference) {
  .lc-card { transition: transform .25s ease; }
  .lc-card.lc-bump { transform: scale(1.015); }
  .lc-settings[open] .lc-panel-inner { animation: lc-reveal .22s ease; }
  @keyframes lc-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
}

.lc-field-label { display: block; font-size: 12.5px; color: var(--lc-cream-dim); margin-bottom: 8px; }

.lc-cost-row {
  display: flex; align-items: baseline; gap: 6px;
  border-bottom: 1.5px solid var(--lc-gold); padding-bottom: 8px;
}
.lc-sym { font-size: 20px; color: var(--lc-gold-bright); font-family: 'Fraunces', serif; }
.lc-cost-input {
  flex: 1; background: transparent; border: none; color: var(--lc-cream);
  font-family: 'Fraunces', Georgia, serif; font-size: clamp(28px, 8vw, 34px);
  font-weight: 500; width: 100%; outline: none; -moz-appearance: textfield;
}
.lc-cost-input::-webkit-outer-spin-button, .lc-cost-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lc-cost-input:focus-visible { outline: 2px solid var(--lc-gold); outline-offset: 3px; border-radius: 4px; }

.lc-cost-slider {
  width: 100%; margin: 16px 0 4px; -webkit-appearance: none; appearance: none;
  height: 3px; background: var(--lc-line); border-radius: 3px;
}
.lc-cost-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--lc-gold-bright); cursor: pointer; border: 2px solid var(--lc-ink);
}
.lc-cost-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--lc-gold-bright);
  border: 2px solid var(--lc-ink); cursor: pointer;
}
.lc-cost-slider:focus-visible { outline: 2px solid var(--lc-gold); outline-offset: 4px; }

.lc-range-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--lc-cream-dim); opacity: 0.7; }

.lc-hero { text-align: center; padding: 30px 10px 8px; }
.lc-hero-label { font-size: 12.5px; color: var(--lc-cream-dim); margin-bottom: 6px; }
.lc-price {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(44px, 14vw, 62px); color: var(--lc-gold-bright); line-height: 1.05;
}
.lc-cur { font-size: 0.5em; vertical-align: 0.3em; color: var(--lc-gold); }
.lc-hero-sub { font-size: 12.5px; color: var(--lc-cream-dim); margin-top: 6px; }

.lc-breakdown { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--lc-line); margin-top: 18px; padding-top: 16px; }
.lc-cell { text-align: center; }
.lc-cell + .lc-cell { border-left: 1px solid var(--lc-line); }
.lc-cell b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 17px; font-weight: 500; color: var(--lc-cream); margin-bottom: 3px; }
.lc-cell span { font-size: 11px; color: var(--lc-cream-dim); }
.lc-cell.lc-margin b { color: var(--lc-rose); }

.lc-settings { background: transparent; border: 1px solid var(--lc-line); border-radius: var(--lc-radius); overflow: hidden; }
.lc-settings summary {
  cursor: pointer; list-style: none; padding: 15px 18px; font-size: 13px; color: var(--lc-cream-dim);
  display: flex; align-items: center; justify-content: space-between; -webkit-tap-highlight-color: transparent;
}
.lc-settings summary::-webkit-details-marker { display: none; }
.lc-chev { transition: transform .2s ease; color: var(--lc-gold); }
.lc-settings[open] summary .lc-chev { transform: rotate(180deg); }
.lc-panel-inner { padding: 4px 18px 18px; }

.lc-setting-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--lc-line); }
.lc-setting-row:first-of-type { border-top: none; }
.lc-txt .lc-t { font-size: 13px; color: var(--lc-cream); }
.lc-txt .lc-d { font-size: 11px; color: var(--lc-cream-dim); margin-top: 2px; line-height: 1.4; }
.lc-setting-row input[type="number"] {
  width: 72px; background: var(--lc-ink); border: 1px solid var(--lc-line); border-radius: 8px;
  color: var(--lc-gold-bright); font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 14px;
  text-align: right; padding: 7px 9px;
}
.lc-setting-row input[type="number"]:focus-visible { outline: 2px solid var(--lc-gold); outline-offset: 2px; }

.lc-reset {
  display: block; width: 100%; text-align: center; margin-top: 10px; font-size: 12px;
  color: var(--lc-cream-dim); background: none; border: none; cursor: pointer; padding: 8px; font-family: inherit;
}
.lc-reset:hover { color: var(--lc-gold-bright); }

.lc-footnote { text-align: center; font-size: 11px; color: var(--lc-cream-dim); opacity: 0.55; margin-top: 14px; }