/**
 * Presupuesto de redes sociales — página 14853.
 * Usa las variables globales del kit de Elementor (con valor de respaldo por si
 * algún día cambian los tokens), así no hay colores inventados.
 *
 * ══════════════════════════════════════════════════════════════════════════
 * ⚠️ LA PASTILLA Y EL PADDING DE LOS CONTENEDORES «BOXED»
 * ══════════════════════════════════════════════════════════════════════════
 * Elementor trae en frontend.min.css:
 *     .e-con > .e-con-inner { padding-block-start: var(--padding-block-start);
 *                             padding-inline-start: 0; padding-inline-end: 0 }
 * O sea: el padding VERTICAL que pongas al contenedor se mete DENTRO de la
 * tarjeta, y el HORIZONTAL lo fuerza a cero. Su selector es (0,2,0), igual que
 * `.calc-rrss > .e-con-inner`, y carga después → ganaba él.
 *
 * Solución: anular sus variables y volver a declarar el padding con
 * `.calc-rrss.e-con > .e-con-inner` → (0,3,0), que sí gana. El aire beige de
 * alrededor se consigue con MARGIN en el .e-con-inner, no con padding.
 *
 * ⚠️ El margen INFERIOR de la tarjeta tiene que ir en ella misma: la sección del
 * formulario está oculta, así que no puede aportar aire.
 *
 * ⚠️ LOS BOTONES: el reset.css de Hello Elementor trae
 *   [type="button"], [type="submit"], button { background: transparent }
 *   [type="button"]:hover { color: #c36 }  ← el rosa
 * `[type="button"]` es un selector de ATRIBUTO: misma especificidad que una
 * clase. Por eso las reglas del botón van prefijadas con `.calc-rrss__app`.
 *
 * ⚠️ Las reglas de `.calc-rrss-form` (segunda pastilla) se conservan aunque el
 * JS mueva el formulario dentro de la primera: son la degradación elegante si
 * el script no llega a ejecutarse.
 *
 * DOS DESGLOSES, A PROPÓSITO:
 *   · `.calc-rrss__vivo`      → claro, permanente, bajo cada pregunta.
 *   · `.calc-rrss__resultado` → oscuro, solo al final.
 * El de en vivo es deliberadamente discreto para que la caja oscura siga
 * siendo el momento importante. Si los dos pesan igual, el final no remata.
 *
 * El `.calc-rrss__vivo` tiene DOS estados: `--desde` (todavía nada con precio,
 * enseña el suelo del presupuesto) y el normal (lista + totales).
 *
 * ⚠️ PUEDE HABER HASTA TRES FILAS DE TOTAL: «Total al mes», «Pago único» y
 * «Primer pago (todo junto)». La cuota y el pago único no se suman en el
 * tiempo, así que van separados; la tercera es la única suma que significa
 * algo (el primer recibo) y por eso lleva su propio filete y va destacada.
 * Los bordes se controlan con `+` para que las filas 2 y 3 no repitan la línea
 * gruesa de la primera.
 * ══════════════════════════════════════════════════════════════════════════
 */

/* Anulamos el padding vertical que Elementor mete dentro de la pastilla. */
.calc-rrss.e-con,
.calc-rrss-form.e-con {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
}

/* --- La pastilla --- */

.calc-rrss.e-con > .e-con-inner,
.calc-rrss-form.e-con > .e-con-inner {
  max-width: 52rem;
  margin-inline: auto;
  margin-block: 3.5rem;
  padding-block: 2.75rem;
  padding-inline: 2.5rem;
  background: #fff;
  border-radius: 1.75rem;
  box-shadow:
    0 1.5rem 3rem rgba(0, 75, 68, 0.10),
    0 0 0 1px rgba(0, 75, 68, 0.06);
}

/* Solo se ve si el JS falla: entonces el formulario queda como segunda pastilla. */
.calc-rrss-form.e-con > .e-con-inner {
  margin-block: 0 3.5rem;
  padding-block: 2.25rem;
}

/* --- Título tipo «NUESTRAS / REDES» --- */
/* Copiado del elemento 19277c0 de esta misma página: la banda no va en el
   texto, va con fondo #00A09B y rotate(-5deg). Ojo: Thunder NO es un token del
   kit, se usa inline en los widgets (ver fallo nº2). Se replica a propósito
   para que el bloque case con el resto de la página. */

.calc-rrss .elementor-widget-heading .elementor-heading-title {
  font-family: 'Thunder', var(--e-global-typography-3acbdf9-font-family, sans-serif);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--e-global-color-primary, #00A09B);
}

.calc-rrss__banda {
  display: inline-block;
  margin-top: 0.45rem;
  padding: 0.45rem 3.5rem 0.3rem;
  background: var(--e-global-color-primary, #00A09B);
  color: var(--e-global-color-secondary, #004B44);
  transform: rotate(-5deg);
}

.calc-rrss__app {
  --calc-primario:  var(--e-global-color-primary,   #00A09B);
  --calc-oscuro:    var(--e-global-color-secondary, #004B44);
  --calc-texto:     var(--e-global-color-text,      #343638);
  --calc-enfasis:   var(--e-global-color-accent,    #FF904D);
  --calc-fondo:     var(--e-global-color-c8a22ce,   #F1F0EA);
  --calc-borde:     var(--e-global-color-fb57f6b,   #D9D9D9);

  width: 100%;
  margin: 1.5rem 0 0;
  color: var(--calc-texto);
  font-family: var(--e-global-typography-840403b-font-family, inherit);
}

/* --- El formulario, ya movido dentro de la pastilla --- */

.calc-rrss__form {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--calc-borde);
}

.calc-rrss__form-tit {
  margin: 0 0 0.3rem;
  font-family: var(--e-global-typography-76b9067-font-family, inherit);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--calc-oscuro);
}

.calc-rrss__form-sub {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.75;
}

/* El widget movido no arrastra los márgenes que tenía en su sección. */
.calc-rrss__form .elementor-widget-form { margin: 0; width: 100%; }

/* --- Barra de progreso --- */

.calc-rrss__barra {
  height: 5px;
  background: var(--calc-borde);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 1.75rem;
}

.calc-rrss__barra-relleno {
  display: block;
  height: 100%;
  width: 0;
  background: var(--calc-primario);
  border-radius: 99px;
  transition: width 0.3s ease;
}

/* --- Pregunta --- */

.calc-rrss__contador {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--calc-primario);
}

.calc-rrss__pregunta {
  margin: 0 0 0.5rem;
  font-family: var(--e-global-typography-76b9067-font-family, inherit);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--calc-oscuro);
}

.calc-rrss__ayuda {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.75;
}

/* --- Opciones --- */

.calc-rrss__ops {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.calc-rrss__op {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: var(--calc-fondo);
  border: 2px solid transparent;
  border-radius: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.calc-rrss__op:hover { border-color: var(--calc-borde); }

.calc-rrss__op--on {
  border-color: var(--calc-primario);
  background: rgba(0, 160, 155, 0.07);
}

.calc-rrss__op input {
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--calc-primario);
}

.calc-rrss__op-txt { display: flex; flex-direction: column; gap: 0.15rem; }
.calc-rrss__op-t   { font-size: 1.02rem; line-height: 1.3; }
.calc-rrss__op-s   { font-size: 0.85rem; opacity: 0.7; }

/* --- Campos numéricos --- */

.calc-rrss__nums { margin-top: 1.25rem; }

.calc-rrss__numfila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  background: var(--calc-fondo);
  border-radius: 0.85rem;
  margin-bottom: 0.6rem;
}

.calc-rrss__numlab { font-size: 1.02rem; }

.calc-rrss__app .calc-rrss__num {
  flex: 0 0 5rem;
  width: 5rem;
  padding: 0.55rem 0.5rem;
  text-align: center;
  font-size: 1rem;
  color: var(--calc-oscuro);
  background: #fff;
  border: 1px solid var(--calc-borde);
  border-radius: 0.6rem;
  -moz-appearance: textfield;
}

.calc-rrss__app .calc-rrss__num:focus {
  outline: 2px solid var(--calc-primario);
  outline-offset: 1px;
}

/* --- Desglose EN VIVO: el precio se suma aquí a cada clic --- */
/* Discreto a propósito: la caja oscura del final sigue siendo el remate. */

.calc-rrss__vivo {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--calc-borde);
}

/* Estado «todavía nada con precio»: enseña el suelo del presupuesto. */

.calc-rrss__vivo-desde {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.calc-rrss__vivo-desde-lab {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--calc-primario);
}

.calc-rrss__vivo-desde strong {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--calc-oscuro);
}

.calc-rrss__vivo-nada {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  font-style: italic;
  opacity: 0.65;
}

/* Estado normal: lista de conceptos + totales. */

.calc-rrss__vivo-tit {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--calc-primario);
}

.calc-rrss__vivo-lista { list-style: none; margin: 0; padding: 0; }

.calc-rrss__vivo-lista li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.calc-rrss__vivo-num { white-space: nowrap; font-weight: 600; }
.calc-rrss__vivo-abierto { opacity: 0.75; font-style: italic; }

.calc-rrss__vivo-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--calc-borde);
  font-size: 0.95rem;
}

/* Filas 2 y 3: sin repetir la línea de separación de la primera. */
.calc-rrss__vivo-total + .calc-rrss__vivo-total {
  margin-top: 0.2rem;
  padding-top: 0;
  border-top: 0;
}

.calc-rrss__vivo-total strong {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--calc-oscuro);
}

/* La suma («Primer pago»): se separa de las dos de arriba y manda. */
/* Va DESPUÉS de la regla del `+` para poder devolverle el borde. */
.calc-rrss__vivo-total + .calc-rrss__vivo-total--suma {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--calc-borde);
}

.calc-rrss__vivo-total--suma strong { color: var(--calc-primario); }

.calc-rrss__vivo-luego {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.7;
}

.calc-rrss__vivo-iva {
  margin: 0.25rem 0 0;
  text-align: right;
  font-size: 0.78rem;
  opacity: 0.6;
}

/* --- Botones (prefijados para ganarle al reset del tema) --- */

.calc-rrss__pie {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
}

.calc-rrss__app .calc-rrss__btn {
  padding: 0.85rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--calc-oscuro);
  border: 2px solid var(--calc-oscuro);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.calc-rrss__app .calc-rrss__btn:hover,
.calc-rrss__app .calc-rrss__btn:focus {
  color: #fff;
  background: var(--calc-primario);
  border-color: var(--calc-primario);
}

.calc-rrss__app .calc-rrss__btn--fantasma {
  color: var(--calc-oscuro);
  background: transparent;
}

.calc-rrss__app .calc-rrss__btn--fantasma:hover,
.calc-rrss__app .calc-rrss__btn--fantasma:focus {
  color: #fff;
  background: var(--calc-oscuro);
  border-color: var(--calc-oscuro);
}

.calc-rrss__app .calc-rrss__btn--off,
.calc-rrss__app .calc-rrss__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.calc-rrss__app .calc-rrss__btn--off:hover,
.calc-rrss__app .calc-rrss__btn:disabled:hover {
  color: #fff;
  background: var(--calc-oscuro);
  border-color: var(--calc-oscuro);
}

/* --- Resultado --- */

.calc-rrss__resultado {
  background: var(--calc-oscuro);
  color: #fff;
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
}

.calc-rrss__btitulo {
  margin: 0 0 1rem;
  font-family: var(--e-global-typography-76b9067-font-family, inherit);
  font-size: 1.4rem;
  line-height: 1.2;
  color: #fff;
}

.calc-rrss__desglose { list-style: none; margin: 0 0 1rem; padding: 0; }

.calc-rrss__desglose li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.95rem;
  line-height: 1.35;
}

.calc-rrss__desglose li:last-child { border-bottom: 0; }
.calc-rrss__linea-num { white-space: nowrap; font-weight: 600; }
.calc-rrss__vacio { justify-content: flex-start !important; border-bottom: 0 !important; opacity: 0.7; }

/* Qué entra y qué no en el precio. En teal para no competir con el aviso de
   ahorro, que es naranja: uno informa, el otro celebra. */
.calc-rrss__incluye {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 160, 155, 0.16);
  border-left: 3px solid var(--calc-primario);
  border-radius: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #fff;
}

.calc-rrss__ahorro {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 144, 77, 0.15);
  border-left: 3px solid var(--calc-enfasis);
  border-radius: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #fff;
}

.calc-rrss__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
}

/* Filas 2 y 3: sin repetir el filete grueso de la primera. */
.calc-rrss__total + .calc-rrss__total {
  padding-top: 0.6rem;
  border-top: 0;
}

/* La suma («Primer pago»): se separa de las dos de arriba y manda.
   Va DESPUÉS de la regla del `+` para poder devolverle el borde. */
.calc-rrss__total + .calc-rrss__total--suma {
  margin-top: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.calc-rrss__total--suma .calc-rrss__total-lab { opacity: 1; font-weight: 600; }
.calc-rrss__total--suma .calc-rrss__total-num { color: #fff; }

.calc-rrss__total-lab { font-size: 1rem; opacity: 0.85; }

.calc-rrss__total-num {
  font-family: var(--e-global-typography-ad552b5-font-family, inherit);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--calc-primario);
}

/* «A partir del segundo mes…»: desactiva la lectura de «esto es el precio». */
.calc-rrss__luego {
  margin: 0.5rem 0 0;
  text-align: right;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #fff;
  opacity: 0.75;
}

/* «IVA no incluido»: justo bajo el total, discreto pero legible. */
.calc-rrss__iva {
  margin: 0.35rem 0 0;
  text-align: right;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: #fff;
  opacity: 0.8;
}

.calc-rrss__aviso {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 600;
}

.calc-rrss__resultado .calc-rrss__nota {
  margin: 0.75rem 0 1.25rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #fff;
  opacity: 0.65;
}

.calc-rrss__app .calc-rrss__resultado .calc-rrss__btn--fantasma {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
}

.calc-rrss__app .calc-rrss__resultado .calc-rrss__btn--fantasma:hover {
  background: #fff;
  color: var(--calc-oscuro);
  border-color: #fff;
}

@media (max-width: 767px) {
  .calc-rrss.e-con > .e-con-inner,
  .calc-rrss-form.e-con > .e-con-inner {
    padding-block: 1.75rem;
    padding-inline: 1.25rem;
    border-radius: 1.25rem;
    margin-block: 2.5rem;
  }
  .calc-rrss-form.e-con > .e-con-inner { margin-block: 0 2.5rem; }
  .calc-rrss .elementor-widget-heading .elementor-heading-title { font-size: 2.4rem; }
  .calc-rrss__banda     { padding: 0.4rem 2rem 0.25rem; }
  .calc-rrss__pregunta  { font-size: 1.35rem; }
  .calc-rrss__resultado { padding: 1.5rem 1rem; }
  .calc-rrss__total-num { font-size: 1.85rem; }
  .calc-rrss__vivo-total strong,
  .calc-rrss__vivo-desde strong { font-size: 1.3rem; }
  .calc-rrss__app .calc-rrss__btn { padding: 0.8rem 1.4rem; font-size: 0.95rem; }
  .calc-rrss__pie       { gap: 0.6rem; }
}