/* ====================================================================
   CALCULADORA RESULTADO — clon Figma node 90-1684 (1443x1049)
   Tokens en styles.css. Fuentes: Kenyan Coffee (display),
   Barlow Semi Condensed (body), Hedvig Letters Sans (párrafos).
   ==================================================================== */

.calc{
  position:relative;
  width:100%;
  /* 1049 / 1443 del frame -> proporción base. Reducido a ~0.85 porque la tarjeta
     se escala al 85% (ver .calc__card en el media query desktop) y sobraba alto. */
  min-height:calc(891 / 1443 * 100vw);
  max-height:891px;
  overflow:hidden;
  background:var(--tgy-bg-deep);
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

/* ---------- Fondo: foto + degradados ---------- */
.calc__bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.calc__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:30% 28%;
}
.calc__grad{
  position:absolute;
  left:0;
  width:100%;
  pointer-events:none;
}
/* Rectangle 1035 — degradado superior (oscuro #1d2226 arriba -> transparente) */
.calc__grad--top{
  top:0;
  height:33.5%;
  background:linear-gradient(180deg,#1d2226 0%,rgba(29,34,38,.58) 50%,rgba(29,34,38,0) 100%);
}
/* Rectangle 1034 — degradado inferior */
.calc__grad--bottom{
  bottom:0;
  height:39%;
  background:linear-gradient(0deg,#1d2226 0%,rgba(29,34,38,.5) 50%,rgba(29,34,38,0) 100%);
}

/* ---------- Contenedor (max 1226 en 1440) ---------- */
.calc__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1226px;
  margin:0 auto;
  padding:0 24px;
  /* top 86/1443 del frame */
  padding-top:5.95vw;
}
@media (min-width:1443px){
  .calc__inner{ padding-top:86px; }
}

/* ---------- Breadcrumb ---------- */
.calc__crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:26px;
}
.calc__crumb-dot{
  width:18px;height:18px;border-radius:50%;
  background:var(--tgy-rojo);
  flex:none;
}
.calc__crumb{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:500;
  font-size:20px;
  line-height:1.3;
  color:#fff;
}

/* ---------- Tarjeta resultado ---------- */
/* La tarjeta ocupa el lado derecho. En Figma: left 485 de 1443 => ~33.6% margen izq.
   width 865 de 1443 => ~60%. La alineamos a la derecha del contenedor. */
/* Tamaño de referencia del frame (865x902). clip-path:path() usa coords
   absolutas del viewBox, por eso la tarjeta es fija a esa medida (igual que
   .course-card en la home) y se ancla a la derecha del contenedor. */
.calc__card{
  position:relative;
  margin-left:auto;
  width:865px;
  min-height:902px;   /* crece con el contenido; altura + notch los recalcula main.js */
  max-width:100%;
  background:#f2f4f8;
  border-radius:20px;
  transition:height .28s ease;
  /* Notch inferior-izquierdo (Subtract) — mismo patrón que .course-card.
     main.js reconstruye el path a la altura real al abrir un colapsable. */
  clip-path:path('M20 0H845C856.05 0 865 8.954 865 20V882C865 893.046 856.05 902 845 902H462.77C451.625 902 441.719 894.896 438.144 884.34L395.922 759.66C392.347 749.104 382.441 742 371.296 742H26C11.641 742 0 730.359 0 716V20C0 8.954 8.954 0 20 0Z');
}
.calc__card-body{
  position:absolute;
  left:56px;
  right:54px;
  top:27px;
  /* title left 541 vs card left 485 = 56px; top 112 vs 85 = 27px */
}

/* ---------- Título ---------- */
.calc__title{
  font-family:'Kenyan Coffee','Barlow Semi Condensed',sans-serif;
  font-weight:400;
  font-size:86px;
  line-height:1.1;
  letter-spacing:-1.72px;
  text-transform:uppercase;
  color:#21272a;
  margin:0 0 31px 0;   /* title bottom ~243, pills top 355 -> gap */
}

/* ---------- Formulario / pills ---------- */
.calc__form{ display:flex; flex-direction:column; gap:14px; }

.calc__pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  height:62px;
  padding:18px 32px;
  border:0;
  border-radius:200px;
  background:rgba(179,179,179,.46);
  text-align:left;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.calc__pill span,
.calc__select{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:400;
  font-size:20px;
  line-height:.9;
  color:var(--tgy-rojo);
}
/* select real estilado como pill */
.calc__select{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding:0;
  text-overflow:ellipsis;
}
.calc__select:focus{ outline:none; }
.calc__select option{ color:#131313; background:#fff; }
.calc__pill-ic{
  flex:none;
  color:rgba(0,0,0,.72);
  pointer-events:none;
}
/* Estado activo = ROJO */
.calc__pill.is-active,
.calc__pill:hover{
  background:var(--tgy-rojo);
}
.calc__pill.is-active span,
.calc__pill:hover span,
.calc__pill:hover .calc__select,
.calc__pill:focus-within .calc__select{ color:#fff; }
.calc__pill.is-active .calc__pill-ic,
.calc__pill:hover .calc__pill-ic,
.calc__pill:focus-within{ background:var(--tgy-rojo); }
.calc__pill:hover .calc__pill-ic,
.calc__pill:focus-within .calc__pill-ic{ color:#fff; }

/* ---------- Colapsable (acordeón) ---------- */
.calc__col{ display:flex; flex-direction:column; }
.calc__col-head{ width:100%; }
.calc__pill-ic{ transition:transform .25s ease; }
.calc__col.is-open .calc__pill-ic{ transform:rotate(180deg); }
.calc__col-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.calc__col.is-open .calc__col-body{ max-height:240px; }
.calc__col-body p{
  margin:0; padding:14px 32px 4px;
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:400; font-size:18px; line-height:1.4; color:rgba(0,0,0,.7);
}

/* ---------- Pregunta ---------- */
.calc__question{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:400;
  font-size:20px;
  line-height:.9;
  color:rgba(0,0,0,.8);
  margin:6px 0 0 2px;
}

/* ---------- Slider ---------- */
.calc__slider{
  position:relative;
  height:34px;
  margin-top:14px;
  display:flex;
  align-items:center;
}
/* Range real — track ROJO + thumb gradiente */
.calc__range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:200px;
  background:var(--tgy-rojo);outline:none;cursor:pointer;margin:0;
}
.calc__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:34px;height:34px;border-radius:50%;border:0;
  background:linear-gradient(38.4deg,#641219 0%,#b31a23 50%,#ec5b31 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:pointer;
}
.calc__range::-moz-range-thumb{
  width:34px;height:34px;border:0;border-radius:50%;
  background:linear-gradient(38.4deg,#641219 0%,#b31a23 50%,#ec5b31 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:pointer;
}
.calc__range::-moz-range-track{height:6px;border-radius:200px;background:var(--tgy-rojo)}
.calc__slider-val{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:400;
  font-size:22px;
  line-height:.9;
  color:rgba(0,0,0,.8);
  text-align:center;
  margin:18px 0 0 0;
}

/* ---------- Resultado ---------- */
/* Base = flujo normal (móvil-first). En desktop se ancla abajo-derecha. */
.calc__result{
  margin:0;
  font-family:'Kenyan Coffee','Barlow Semi Condensed',sans-serif;
  font-weight:400;
  font-size:48px;
  line-height:1.1;
  letter-spacing:-.96px;
  text-transform:uppercase;
  color:#21272a;
  text-align:right;
}

/* ---------- CTA ---------- */
.calc__cta-wrap{ margin-top:18px; }

/* Anclaje desktop dentro del tab del notch — al FONDO para que escale con la altura */
@media (min-width:992px){
  /* Tarjeta a escala reducida (petición clienta). Anclada arriba-derecha para que
     siga pegada al lado derecho del contenedor. El notch escala con ella. */
  .calc__card{
    transform:scale(.85);
    transform-origin:top right;
    /* scale() no reduce la caja de layout (sigue ~902px) → colapsamos el alto
       sobrante (15% de 902 ≈ 135px) para que no quede hueco debajo. */
    margin-bottom:-135px;
  }
  .calc__result{
    position:absolute;
    right:54px;
    bottom:94px;         /* 902-808: misma posición que antes con card 902 */
    white-space:nowrap;
  }
  .calc__cta-wrap{
    position:absolute;
    right:54px;
    bottom:29px;         /* 902-873 */
    margin-top:0;
  }
}
.calc__cta{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:23px;
  width:355px;
  height:43px;
  padding:8px 16px;
  border:0;
  border-radius:32px;
  background:var(--tgy-rojo);
  cursor:pointer;
}
.calc__cta>span:first-child{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:600;
  font-size:22px;
  line-height:24px;
  letter-spacing:.5px;
  color:#fff;
  white-space:nowrap;
}
.calc__cta-ic{
  flex:none;
  width:30px;height:29px;
  display:flex;align-items:center;justify-content:center;
  border-radius:100px;
  background:#fff;
}
/* ArrowLeft (apunta ←) -> rotar 135deg CW = flecha hacia arriba-derecha (↗) */
.calc__cta-ic svg{
  color:#000;
  transform:rotate(135deg);
}

/* ====================================================================
   RESPONSIVE <= 991.98px  (1 columna, tarjeta a ancho completo)
   ==================================================================== */
@media (max-width:991.98px){
  .calc{
    min-height:0;
    max-height:none;
    padding:0 0 56px;
  }
  .calc__photo{ object-position:30% 22%; }
  .calc__inner{
    padding-top:120px;
    padding-bottom:0;
  }
  .calc__card{
    width:100%;
    height:auto;
    min-width:0;
    max-width:none;
    margin-left:0;
    clip-path:none;
    border-radius:20px;
    padding:32px 24px 40px;
  }
  .calc__card-body{
    position:static;
    left:auto; right:auto; top:auto;
  }
  .calc__title{
    font-size:clamp(34px,9vw,56px);
    margin-bottom:24px;
    letter-spacing:-.02em;
  }
  .calc__pill{ padding:16px 24px; }
  /* Resultado + CTA: flujo normal bajo el formulario (base) */
  .calc__result{
    font-size:clamp(28px,7vw,40px);
    margin-top:28px;
  }
  .calc__cta-wrap{
    display:flex; justify-content:stretch;
    margin-top:20px;
  }
  .calc__cta{ width:100%; justify-content:space-between; }
}

@media (max-width:480px){
  .calc__cta>span:first-child{ font-size:18px; }
  .calc__pill span{ font-size:18px; }
  .calc__result{ font-size:clamp(24px,6.5vw,32px); text-align:left; }
  .calc__cta{ padding:8px 12px; }
}

/* ===== Campos del plugin (desplegables + aviso tope) ===== */
.tgy-calc__field{margin-bottom:14px}
.tgy-calc__label{display:block;font-family:var(--tgy-font-body,sans-serif);font-weight:600;font-size:15px;line-height:1.3;color:#21272a;margin:0 0 8px}
.tgy-calc__select{width:100%;height:48px;border:1px solid rgba(0,0,0,.2);border-radius:100px;padding:0 40px 0 18px;
  font-family:var(--tgy-font-body,sans-serif);font-size:15px;color:#21272a;background:#fff;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23b31a23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right 16px center}
.tgy-calc__select:focus{outline:none;border-color:var(--tgy-rojo,#b31a23)}
.tgy-calc__select.is-error{border-color:#d63638;background-color:#fdeaea}
.tgy-calc__cap{font-family:var(--tgy-font-body,sans-serif);font-size:14px;line-height:1.45;color:var(--tgy-rojo,#b31a23);
  margin:10px 0 0;max-width:520px}
.tgy-calc__result[hidden],.tgy-calc__cap[hidden]{display:none}