/* ═══════════ /tarifas — estilos propios (tokens de base.css) ═══════════
   El shell (hero .dp/a-*, faq, cta) viene de derechos.css + home.css. */

/* — Tarjetas de las dos vías — */
/* Owner 12-ago-2026: las dos vias con el MISMO estilo que la card de tarifas
   del home (.compare-card + .compare-inner): ancho del contenedor, padding 80
   y radio 32, con la misma escala responsive (40/36 y radio 20 por debajo de
   768; 32/24 por debajo de 480). Sin max-width: llenar el .container da el
   mismo 1.112 px en escritorio que el home y se adapta solo en pantallas
   menores, sin numero magico. La sombra ya era identica.
   El padding es clamp(40px,14.7%,80px), no 80 fijo: el 14,7% de una card de
   546 px pasa de 80, asi que en escritorio TOPA en los 80 exactos del home, pero entre 861 y 1.160 px de pantalla siguen
   habiendo DOS columnas y la card baja a 409 px, donde 80 fijos dejaban el
   texto en 249. El home no lo sufre porque su card es de ancho completo. */
.tar-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 auto}
.tar-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--gray-100);border-radius:32px;padding:clamp(40px,14.7%,80px);box-shadow:0 2px 4px rgba(0,0,0,.04),0 8px 32px rgba(0,0,0,.06)}
/* Margenes FIJOS entre bloques: los huecos internos son identicos en las dos
   tarjetas (nada de space-between, que agranda los de la tarjeta corta);
   el sobrante de la tarjeta con menos texto queda tras los ticks, al pie. */
.tar-card .tar-badge{align-self:flex-start}
/* La de la derecha: mismo fondo + degradado que la compare-card de la home */
.tar-card--grad{position:relative;overflow:hidden;background:#0d1825;border-color:#0d1825;color:var(--white)}
.tar-card--grad::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse 70% 60% at 85% 10%,rgba(26,115,232,0.45) 0%,rgba(26,115,232,0) 70%),radial-gradient(ellipse 45% 50% at 8% 92%,rgba(26,115,232,0.25) 0%,rgba(26,115,232,0) 65%)}
.tar-card--grad > *{position:relative}
.tar-card--grad p,.tar-card--grad li{color:rgba(255,255,255,.72)}
.tar-badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:var(--blue-light);border-radius:999px;padding:5px 12px;margin-bottom:16px}
.tar-card--grad .tar-badge{color:#93C5FD;background:rgba(147,197,253,.14)}
.tar-price{display:flex;align-items:baseline;gap:10px;margin:2px 0 4px}
.tar-price b{font-size:56px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tar-price span{font-size:14px;color:var(--gray-400);font-weight:500}
.tar-card--grad .tar-price span{color:rgba(255,255,255,.55)}
.tar-card > p{font-size:14.5px;line-height:1.6;margin:10px 0 18px}
.tar-checks{display:flex;flex-direction:column;gap:9px;font-size:14px}
.tar-checks li{display:flex;gap:9px;align-items:flex-start;line-height:1.5;color:var(--gray-700)}
.tar-card--grad .tar-checks li{color:rgba(255,255,255,.85)}
.tar-checks svg{width:15px;height:15px;flex:0 0 15px;margin-top:3px;color:var(--green)}
.tar-card--grad .tar-checks svg{color:#7CC48F}
.tar-recibes{margin-top:20px;padding-top:16px;border-top:1px solid var(--gray-100);font-size:13.5px;color:var(--gray-500)}
.tar-card--grad .tar-recibes{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.62)}
.tar-recibes b{font-size:15px}
.tar-card--grad .tar-recibes b{color:var(--white)}

/* — Tabla "en euros" — */
/* La card vuelve a su gris de siempre y sin borde; solo crece el padding. */
.tar-tabla-wrap{max-width:920px;margin:0 auto;background:var(--gray-50);border-radius:var(--r-xl);padding:48px}
.tar-tabla-wrap h3{font-size:17px;margin-bottom:4px}
.tar-tabla-wrap .tt-sub{font-size:13.5px;margin-bottom:18px;color:var(--gray-500)}
table.tar-tabla{width:100%;border-collapse:collapse;font-size:14.5px}
.tar-tabla th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-400);font-weight:600;text-align:right;padding:0 0 10px;border-bottom:1px solid var(--gray-200)}
.tar-tabla th:first-child{text-align:left}
.tar-tabla td{padding:11px 0;text-align:right;border-bottom:1px solid var(--gray-100);color:var(--gray-700)}
.tar-tabla td:first-child{text-align:left;font-weight:500;color:var(--dark)}
.tar-tabla tr:last-child td{border-bottom:none}
.tar-tabla .tt-net{font-weight:700;color:var(--dark)}
.tar-nota{font-size:12.5px;color:var(--gray-400);margin-top:14px;line-height:1.5;text-align:center;max-width:640px;margin-left:auto;margin-right:auto}

/* — Ejemplo completo (dentro de la tarjeta de la tabla) — */
.tar-ej{margin-top:22px;padding-top:20px;border-top:1px solid var(--gray-200)}
.tar-ej h4{font-size:14.5px;font-weight:600;margin-bottom:10px}
.tar-ej ul{display:flex;flex-direction:column;gap:8px}
.tar-ej li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--gray-500)}
.tar-ej li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.tar-ej li strong{color:var(--dark);font-weight:600}
.tar-ej-res{margin-top:14px;font-size:14.5px;color:var(--gray-700)}
.tar-ej-res strong{font-size:16px;color:var(--dark)}

/* — Aviso de tarifas gancho — */
.tar-gancho{max-width:760px;margin:24px auto 0;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--r-lg);padding:16px 18px;display:flex;gap:12px;align-items:center;font-size:13.5px;line-height:1.6;color:var(--gray-500)}
.tar-gancho svg{width:18px;height:18px;flex:0 0 18px;color:var(--blue)}
.tar-gancho strong{color:var(--dark)}

/* — Comparativa con otras plataformas — */
.tar-seg{border:1.5px solid var(--gray-200);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--gray-500);transition:all var(--t);background:var(--white);cursor:pointer}
.tar-seg:hover{border-color:var(--blue);color:var(--blue)}
.tar-seg.on{border-color:var(--blue);background:var(--blue);color:var(--white)}
.tar-vs{max-width:760px;margin:0 auto}
.tar-vs-toggle{display:flex;justify-content:center;gap:8px;margin-bottom:26px}
.tar-vs-row{display:grid;grid-template-columns:220px 1fr 96px;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--gray-200)}
.tar-vs-row:last-of-type{border-bottom:none}
.tar-vs-row .tv-nom{font-size:14.5px;font-weight:600}
.tar-vs-row .tv-nom span{display:block;font-weight:400;font-size:12px;color:var(--gray-400)}
.tar-vs-bar{height:30px;border-radius:7px;background:var(--gray-100);overflow:hidden;position:relative}
.tar-vs-bar i{position:absolute;inset:0 auto 0 0;border-radius:7px;background:var(--gray-300);transition:width .45s cubic-bezier(.4,0,.2,1)}
.tar-vs-row--al .tar-vs-bar i{background:var(--blue)}
.tar-vs-row .tv-val{font-size:15px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.tar-vs-row--al .tv-val{color:var(--blue)}
/* sin cursiva: la DM Sans italic es estatica (un solo peso) y las negritas
   de esta linea no se pintaban. El resto del sitio tampoco usa cursiva. */
.tar-vs-delta{text-align:center;font-size:14px;color:var(--gray-500);margin-top:18px}
.tar-vs-delta b{color:var(--dark)}
.tar-vs-fuente{text-align:center;font-size:12px;color:var(--gray-400);margin-top:8px}

/* — Franja "todo incluido" — */
.tar-incl{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin:0 auto}
.tar-incl-item{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--r-lg);padding:20px 20px 18px}
/* el icono usa la pastilla comun .mini-ic (base.css), centrada en la tarjeta */
.tar-incl-item .mini-ic{margin-left:auto;margin-right:auto}
.tar-incl-item{text-align:center}
.tar-incl-item b{display:block;font-size:14.5px;font-weight:600;margin-bottom:4px}
.tar-incl-item p{font-size:13px;line-height:1.55}

/* — genérico — */
/* Sin cifras en el hero (opcion 1 aprobada 12-ago): las tarjetas de via
   suben; el hueco hero->vias del mockup aprobado es ~56px, no 2·--sec-y. */
.tarifas-page .hero{padding-bottom:8px}
.tar-sec{padding:var(--sec-y) 0}
/* Banda gris de la comparativa, TECNICA DEL HOME (owner 12-ago-2026: "tiene
   que ocupar mas espacio, salir antes y desaparecer despues"): el gris entra
   difuminado en la COLA de #importes, la comparativa lo lleva solido —asi su
   titular no cae a mitad del degradado, como pasaba— y se va difuminado en la
   CABECERA de #incluido. Mismo tratamiento y mismo gris (--gray-100) que
   #por-que en /como-funciona.
   La entrada mide 48px, no 100: la tarjeta gris de #importes termina justo a
   48px del final de su seccion y con 100px el degradado le comeria el borde
   inferior. */
.tar-sec#importes{background:linear-gradient(180deg,#fff 0,#fff calc(100% - 48px),var(--gray-100) 100%)}
.tar-sec--gris{background:var(--gray-100)}
.tar-sec#incluido{background:linear-gradient(180deg,var(--gray-100) 0,#fff 100px)}
.tar-sec-head{text-align:center;max-width:640px;margin:0 auto 34px}
.tar-sec-head h2{margin-bottom:10px}
.tar-sec-head p{font-size:15.5px;color:var(--gray-500)}
.tarifas-page .faq-ans-inner a{color:var(--blue);font-weight:500}

@media(max-width:860px){
  .tar-cards{grid-template-columns:1fr}
  .tar-incl{grid-template-columns:1fr 1fr}
  .tar-vs-row{grid-template-columns:1fr;gap:6px}
  .tar-vs-row .tv-val{text-align:left}
}
@media(max-width:768px){
  /* escala del home: radio 20 y padding 40/36 */
  .tar-card{border-radius:20px;padding:40px 36px}
}
@media(max-width:560px){
  .tar-incl{grid-template-columns:1fr}
  .tar-tabla-wrap{padding:24px 20px}
  .tar-price b{font-size:46px}
  table.tar-tabla{font-size:13px}
  .tar-tabla th{font-size:10.5px}
  .tar-tabla td{padding:9px 0}
  .tar-tabla td:first-child{padding-right:10px}
  .tar-nota{text-align:left}
}
@media(max-width:480px){
  /* escala del home: padding 32/24 */
  .tar-card{padding:32px 24px}
}