/* ==========================================================================
   LUVERA MEDIA — Plan de gestión de redes sociales (PROTOTIPO)
   Hoja aparte: no toca el sitio publicado. Se fusiona con styles.css
   solo si la sección se aprueba.
   ========================================================================== */

/* ----- Encabezado de la sección ------------------------------------------ */
.plan__cab {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
}
@media (min-width: 900px) {
  .plan__cab { grid-template-columns: 1.25fr 1fr; gap: 4rem; }
}

/* ----- Selector de alcance ------------------------------------------------ */
.alcance {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--linea-osc);
  padding-top: 1.5rem;
}
.alcance__lista {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--linea-osc);
  max-width: 100%;
}
@media (min-width: 560px) {
  .alcance__lista { grid-template-columns: repeat(3, auto); width: fit-content; }
}
.alcance__btn {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1.05rem 1.6rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linea-osc);
  color: var(--grafito);
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.alcance__btn:last-child { border-bottom: 0; }
.alcance__btn:hover { color: var(--cal); }
.alcance__btn[aria-pressed="true"] { background: var(--cian); color: var(--cal); }
@media (min-width: 560px) {
  .alcance__btn { border-bottom: 0; border-right: 1px solid var(--linea-osc); }
  .alcance__btn:last-child { border-right: 0; }
}

/* ----- Canales incluidos ------------------------------------------------- */
.canales { margin-top: 1.75rem; }
.canales__lista { display: flex; flex-wrap: wrap; gap: .6rem; }
.canal {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .95rem 1.5rem;
  border: 1px solid var(--linea-osc);
  border-left: 2px solid var(--cian-luz);
  color: var(--cal);
}

/* ----- Cifra ------------------------------------------------------------- */
.tarifa {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: end;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--linea-osc);
}
@media (min-width: 900px) {
  .tarifa { grid-template-columns: auto 1fr; gap: clamp(3rem, 7vw, 6rem); }
}

.tarifa__uf {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -.035em;
  line-height: .88;
  font-size: clamp(4rem, 13vw, 9.5rem);
  color: var(--cal);
  display: flex;
  align-items: baseline;
  gap: .18em;
}
.tarifa__uf small {
  font-size: .2em;
  font-stretch: 100%;
  letter-spacing: .02em;
  color: var(--cian-luz);
}
.tarifa__periodo {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grafito);
  margin: .9rem 0 0;
}

.tarifa__pesos { display: grid; gap: .55rem; }
.tarifa__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linea-osc);
  max-width: 30rem;
}
.tarifa__fila:last-child { border-bottom: 0; }
.tarifa__fila dt {
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grafito);
}
.tarifa__fila dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
}
.tarifa__fila--fuerte dd { color: var(--cal); }
.tarifa__nota { margin: 1.25rem 0 0; max-width: 30rem; }

/* La leyenda de la UF no cabe en una línea en pantallas angostas */
@media (max-width: 760px) {
  .tarifa__nota { display: block; }
  .tarifa__nota::before, .tarifa__nota::after { display: none; }
  .tarifa__nota > span { white-space: normal; }
}

/* Red de seguridad: ningún hijo de una retícula fuerza el ancho del padre */
.tarifa > *, .tarifa__pesos > *, .plan__cab > *, .plan__cierre > * { min-width: 0; }

/* ----- Producción mensual ------------------------------------------------ */
.produccion {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* en pantallas muy angostas baja a una sola fila legible */
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.produccion__dato { border-left: 1px solid var(--cian-luz); padding-left: 1.1rem; }
@media (max-width: 460px) {
  .produccion { grid-template-columns: 1fr; gap: 1.1rem; }
  .produccion__dato { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1rem; }
  .produccion__t, .produccion__c { margin: 0; }
}
.produccion__n {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 110%;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.03em;
  display: block;
}
.produccion__c {
  font-family: var(--f-mono);
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cian-luz);
  margin: .35rem 0 0;
}
.produccion__t {
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grafito);
  margin: .6rem 0 0;
}

/* ----- Qué incluye -------------------------------------------------------- */
.incluye { margin-top: clamp(3rem, 7vw, 5rem); }
.incluye__lista {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--linea-osc);
}
.incluye__lista li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--linea-osc);
  font-size: 1rem;
  break-inside: avoid;
}
.incluye__lista .n {
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .12em;
  color: var(--cian-luz);
  flex: 0 0 auto;
}
.incluye__lista sup { color: var(--cian-luz); font-size: .7em; }
@media (min-width: 860px) {
  .incluye__lista { columns: 2; column-gap: clamp(2.5rem, 6vw, 5rem); }
  .incluye__lista li:first-child { border-top: 0; }
}

/* ----- Condiciones -------------------------------------------------------- */
.condiciones {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea-osc);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 760px) { .condiciones { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
.condiciones p { margin: 0; font-size: .875rem; color: var(--grafito); line-height: 1.6; max-width: 34em; }
.condiciones strong { color: var(--cal); font-weight: 500; }

/* ----- Cierre ------------------------------------------------------------- */
.plan__cierre {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
}
@media (min-width: 900px) { .plan__cierre { grid-template-columns: 1.3fr 1fr; gap: 4rem; } }