/* Página de servicios. Reutiliza los tokens y componentes de styles.css (nav, botones, campos, FAQ, pie). */

.sv .seccion { padding: clamp(48px, 6vw, 84px) 0; }
.sv-hero { padding: clamp(118px, 13vw, 168px) 0 clamp(28px, 4vw, 48px); position: relative; }
.sv-hero { overflow: hidden; isolation: isolate; }
.sv-hero__fondo { position: absolute; inset: 0; z-index: -1; }
.sv-hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.sv-hero__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 8, 8, .94) 0%, rgba(4, 8, 8, .78) 38%, rgba(4, 8, 8, .25) 75%, rgba(4, 8, 8, .35) 100%), linear-gradient(0deg, var(--fondo) 0%, transparent 28%); }
.sv-hero h1 { font-size: clamp(2.3rem, 7.4vw, 5.2rem); max-width: 16ch; }
.sv-hero__sub { margin-top: 28px; max-width: 58ch; color: var(--suave); font-size: clamp(1.05rem, 2.2vw, 1.2rem); }
.sv-hero__cta { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 16px; }
.sv-lead { margin-top: 22px; max-width: 60ch; color: var(--suave); }
.sv-nota, .sv-aviso { margin-top: 26px; max-width: 70ch; color: var(--suave); font-size: .92rem; }
.sv-aviso { padding: 16px 20px; border-left: 2px solid var(--rojo); background: rgba(224, 48, 42, .06); border-radius: 0 12px 12px 0; color: var(--menta); }
.sv-notas { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 12px; max-width: 78ch; color: var(--suave); font-size: .92rem; }
.sv-notas li { padding-left: 18px; border-left: 2px solid var(--verde); }

/* Tarjetas de planes */
.planes { margin-top: 48px; display: grid; gap: 18px; grid-template-columns: 1fr; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--r-caja); border: 1px solid var(--linea);
  background: radial-gradient(420px circle at 100% 0%, rgba(46, 230, 212, .08), transparent 60%), linear-gradient(180deg, rgba(232, 236, 237, .035), transparent 40%), var(--superficie);
  box-shadow: inset 0 1px 0 rgba(232, 236, 237, .07); transition: transform .5s var(--curva), border-color .3s; }
.plan:hover { transform: translateY(-4px); border-color: rgba(46, 230, 212, .5); }
.plan--dest { border-color: rgba(46, 230, 212, .55); box-shadow: inset 0 1px 0 rgba(232, 236, 237, .1), 0 0 0 1px rgba(46, 230, 212, .25), 0 24px 60px -28px var(--verde-brillo); }
.plan--dest::before { content: "Más elegido"; position: absolute; top: -12px; left: 24px; padding: 4px 14px; border-radius: 999px; background: var(--verde); color: #041010; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; }
.plan__grupo { font-size: .7rem; text-transform: uppercase; letter-spacing: .28em; color: var(--suave); }
.plan h3 { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.plan__precio { font-family: var(--serif); font-weight: 700; font-size: 2.3rem; line-height: 1; letter-spacing: -.02em; color: var(--menta); }
.plan__precio small { display: block; margin-top: 8px; font-family: var(--sans); font-weight: 400; font-size: .78rem; letter-spacing: .04em; color: var(--suave); }
.plan__precio em { font-style: normal; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); margin-right: 8px; font-family: var(--sans); font-weight: 500; }
.plan__resumen { color: var(--suave); font-size: .98rem; }
.plan__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.plan__lista li { position: relative; padding-left: 22px; }
.plan__lista li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.plan .btn { margin-top: auto; }

/* Comparador */
.tabla-caja { margin-top: 40px; overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--r-caja); background: var(--superficie); -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla thead th { font-family: var(--serif); font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--menta); position: sticky; top: 0; background: var(--superficie); }
.tabla tbody th { font-weight: 500; color: var(--suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; white-space: nowrap; }
.tabla tr:last-child th, .tabla tr:last-child td { border-bottom: 0; }
.tabla .col-dest { background: var(--verde-tenue); }
.tabla thead .col-dest { color: var(--verde); }
.tabla td strong { color: var(--menta); font-weight: 600; }

/* Cómo funciona */
.proceso { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: p; }
.proceso li { position: relative; padding: 26px 26px 26px 26px; border-radius: var(--r-caja); border: 1px solid var(--linea); background: linear-gradient(180deg, rgba(232, 236, 237, .03), transparent 50%), var(--superficie); }
.proceso__n { display: block; font-family: var(--serif); font-weight: 700; font-size: 2.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(46, 230, 212, .55); margin-bottom: 14px; }
.proceso h3 { font-size: 1.1rem; font-weight: 700; }
.proceso p { margin-top: 8px; color: var(--suave); font-size: .96rem; }

/* Pagos */
.pagos { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: center; }
.pagos__lista { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; color: var(--suave); }
.pagos__lista li { padding-left: 18px; border-left: 2px solid var(--verde); }
.flujo { display: grid; gap: 22px; padding: 26px; border-radius: var(--r-caja); border: 1px solid var(--linea); background: radial-gradient(500px circle at 0% 0%, rgba(46, 230, 212, .08), transparent 60%), var(--superficie); }
.flujo__origen { justify-self: start; padding: 14px 26px; border-radius: 999px; border: 1px solid var(--verde); color: var(--verde); font-weight: 600; text-transform: uppercase; letter-spacing: .24em; font-size: .8rem; box-shadow: 0 0 28px -8px var(--verde-brillo); }
.flujo__ramas { display: grid; gap: 14px; padding-left: 22px; border-left: 2px solid var(--linea-fuerte); }
.flujo__rama { position: relative; display: grid; gap: 10px; grid-template-columns: 1fr; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--linea); background: rgba(4, 8, 8, .5); }
.flujo__cable { position: absolute; left: -22px; top: 50%; width: 22px; height: 2px; background: var(--linea-fuerte); }
.flujo__dato b { display: block; font-weight: 600; color: var(--menta); }
.flujo__dato span { font-size: .84rem; color: var(--suave); }
.flujo__destino { font-family: var(--serif); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; color: var(--menta); }
.flujo__rama--marca { border-color: rgba(46, 230, 212, .55); background: var(--verde-tenue); }
.flujo__rama--marca .flujo__destino { color: var(--verde); }

/* Simulador: barra del precio */
.sim { margin-top: 40px; display: grid; gap: 22px; grid-template-columns: 1fr; }
.sim__barra { padding: 28px; border-radius: var(--r-caja); border: 1px solid var(--linea); background: var(--superficie); align-content: start; display: grid; gap: 14px; }
.sim__etq { font-size: .72rem; text-transform: uppercase; letter-spacing: .26em; color: var(--suave); }
.sim__precio { font-family: var(--serif); font-weight: 700; font-size: clamp(2.4rem, 8vw, 3.4rem); line-height: 1; letter-spacing: -.02em; color: var(--menta); font-variant-numeric: tabular-nums; }
.sim__rango { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 10px 0 0; background: transparent; cursor: pointer; --llenado: 20%; }
.sim__rango::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--verde) var(--llenado), rgba(232, 236, 237, .16) var(--llenado)); box-shadow: 0 0 14px -2px var(--verde-brillo); }
.sim__rango::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(232, 236, 237, .16); }
.sim__rango::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--verde); }
.sim__rango::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: #061010; border: 2px solid var(--verde); box-shadow: 0 0 0 4px rgba(46, 230, 212, .15), 0 0 22px rgba(46, 230, 212, .7); transition: transform .2s; }
.sim__rango::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #061010; border: 2px solid var(--verde); box-shadow: 0 0 0 4px rgba(46, 230, 212, .15), 0 0 22px rgba(46, 230, 212, .7); }
.sim__rango:active::-webkit-slider-thumb { transform: scale(1.12); }
.sim__rango:focus-visible { outline: 2px solid var(--verde); outline-offset: 6px; border-radius: 8px; }
.sim__marcas { display: flex; justify-content: space-between; font-size: .78rem; color: var(--suave); }
.sim__tramo { color: var(--verde); font-size: .95rem; font-weight: 500; }
.sim__res { display: grid; gap: 18px; padding: 28px; border-radius: var(--r-caja); border: 1px solid rgba(46, 230, 212, .4); background: radial-gradient(500px circle at 100% 0%, rgba(46, 230, 212, .1), transparent 60%), var(--superficie); align-content: start; }
.sim__desglose { margin: 0; display: grid; gap: 0; }
.sim__desglose div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-top: 1px solid var(--linea); font-size: .96rem; }
.sim__desglose dt { color: var(--suave); }
.sim__desglose dd { margin: 0; color: var(--menta); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sim__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 18px; padding-top: 16px; border-top: 1px solid var(--linea-fuerte); }
.sim__total span { font-size: .72rem; text-transform: uppercase; letter-spacing: .26em; color: var(--suave); }
.sim__total strong { font-family: var(--serif); font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1; color: var(--verde); font-variant-numeric: tabular-nums; }
.sim__nota { min-height: 1.2em; font-size: .86rem; color: var(--suave); }
.sim__res .btn { white-space: normal; text-align: center; }

/* Hitos */
.hitos { margin-top: 40px; display: grid; gap: 18px; grid-template-columns: 1fr; }
.hito { padding: 26px; border-radius: var(--r-caja); border: 1px solid var(--linea); background: var(--superficie); }
.hito h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.hito dl { margin: 18px 0 0; display: grid; }
.hito dl div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--linea); font-size: .95rem; }
.hito dt { color: var(--suave); }
.hito dd { margin: 0; color: var(--menta); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
  .planes { grid-template-columns: 1fr 1fr; }
  .proceso { grid-template-columns: 1fr 1fr; }
  .hitos { grid-template-columns: 1fr 1fr; }
  .flujo__rama { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 980px) {
  .planes { grid-template-columns: repeat(3, 1fr); }
  .proceso { grid-template-columns: repeat(3, 1fr); }
  .hitos { grid-template-columns: repeat(3, 1fr); }
  .pagos { grid-template-columns: 6fr 6fr; gap: 72px; }
  .sim { grid-template-columns: 5fr 6fr; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .plan, .plan:hover { transition: none; transform: none; }
}