/* Sabbia · página de precios (12-10-2026). Se apoya en /web.css (cabecera y pie)
   y en /home.css (tokens, rejilla áurea, tipografía, .mod, .faq, .final); aquí solo
   lo propio, con prefijo pr- para no chocar con clases que ya existen (.cierre,
   .lienzo… esconden cosas en web.css). Sin mayúsculas sostenidas, nada < 13 px. */

/* ───── 1 · la cifra ───── */
.pr-cabeza .bloque-int { padding-top: var(--f6); }
.pr-cabeza .texto { gap: var(--f3); }
.pr-cabeza .texto h1 { margin-bottom: var(--f2); }
body.home p.pr-nota { font-size: 15px; color: var(--gris); border-left: 2px solid var(--teal-claro); padding-left: var(--f3); }

.pr-calc { border: 1px solid var(--borde); border-radius: 8px; background: #fbfaf7; padding: var(--f4) var(--f5); display: flex; flex-direction: column; gap: var(--f4); box-shadow: var(--sombra); }
.pr-calc-cab { display: flex; flex-direction: column; gap: 8px; }
.pr-ceja-sib { display: flex; align-items: center; gap: 8px; }
.pr-ceja-sib img { width: 21px; height: 21px; }
body.home h2.pr-h3 { font-size: 23px; line-height: 1.2; letter-spacing: 0; }
body.home .pr-calc-cab p { font-size: 15px; color: var(--gris); }
.pr-grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--f2); }
.pr-grupo legend { padding: 0; margin-bottom: var(--f2); font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 15px; font-weight: 400; color: var(--grafito); }
.pr-opciones { display: flex; flex-wrap: wrap; gap: var(--f1); }
/* .mod de la home va con aria-pressed; aquí son radios */
.pr-opciones .mod[aria-checked="true"] { border-color: var(--teal); color: var(--teal-hondo); background: rgba(127, 184, 175, .14); }
.pr-opciones .mod[aria-checked="true"]::before { background: var(--teal); border-color: var(--teal); box-shadow: inset 0 0 0 3px #fbfaf7; }
.pr-opciones .mod[aria-disabled="true"] { opacity: .45; cursor: default; }
.pr-opciones .mod[aria-disabled="true"]:hover { border-color: var(--borde); }
body.home p.pr-aviso-espacio { font-size: 14px; color: var(--gris); min-height: 1.6em; }

.pr-resultado { border-top: 1px solid var(--borde); padding-top: var(--f3); display: flex; flex-direction: column; gap: 8px; scroll-margin: var(--f4); }
.pr-cifra-linea { display: flex; align-items: baseline; gap: 8px; min-height: 96px; }
.pr-cifra { font-family: 'EB Garamond', Garamond, serif; font-weight: 400; font-size: 96px; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.pr-cifra.pr-medida { font-size: 56px; font-style: italic; color: var(--teal); }
.pr-cifra.cambia { animation: pr-cambia .45s cubic-bezier(.16, .7, .3, 1); }
@keyframes pr-cambia { from { opacity: .25; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pr-eur { font-family: 'EB Garamond', Garamond, serif; font-weight: 400; font-size: 40px; color: var(--teal); }
.pr-unidad { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: .04em; color: var(--gris); }
body.home p.pr-plan { min-height: 2.7em; font-weight: 400; font-family: 'EB Garamond', Garamond, serif; font-size: 20px; line-height: 1.35; color: var(--grafito); margin-top: var(--f1); }

.pr-incluye { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.pr-incluye li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--f3); padding: 13px 0; border-bottom: 1px solid #e4ded2; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 15px; line-height: 1.45; }
.pr-inc-t { color: var(--grafito); font-weight: 300; }
.pr-inc-v { color: var(--teal-texto); font-weight: 400; text-align: right; white-space: nowrap; }

/* ───── títulos de bloque a una columna ───── */
.pr-titulo { display: flex; flex-direction: column; gap: var(--f3); max-width: 900px; margin-bottom: var(--f5); }
.pr-titulo p { color: var(--gris); max-width: 760px; }

/* ───── 2 · la tabla ───── */
.pr-matriz-marco { border-top: 1px solid var(--borde); }
.pr-matriz { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pr-matriz th, .pr-matriz td { border-bottom: 1px solid var(--borde); padding: 0; text-align: left; vertical-align: middle; }
.pr-matriz thead th { padding: var(--f3) var(--f2) var(--f2); font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 15px; font-weight: 400; color: var(--teal-texto); letter-spacing: .04em; }
.pr-matriz thead th:first-child { width: 34%; padding-left: 0; }
.pr-th-eq { color: var(--gris); }
.pr-matriz tbody th { padding: var(--f3) var(--f2) var(--f3) 0; font-family: 'EB Garamond', Garamond, serif; font-size: 25px; font-weight: 400; line-height: 1.2; color: var(--tinta); }
.pr-th-sub { display: block; margin-top: 4px; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 14px; font-weight: 300; color: var(--gris); }
.pr-celda { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: var(--f3) var(--f2); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-family: 'EB Garamond', Garamond, serif; font-size: 25px; font-weight: 400; color: var(--teal-texto); text-align: left; transition: background .3s ease, color .3s ease; }
.pr-celda .pr-n { font-size: 48px; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; transition: color .3s ease; }
.pr-celda:hover { background: rgba(127, 184, 175, .08); }
.pr-celda:focus-visible { outline: 2px solid var(--teal-texto); outline-offset: -2px; }
.pr-celda[aria-pressed="true"] { background: rgba(127, 184, 175, .2); box-shadow: inset 0 -2px 0 var(--teal); color: #24564f; }
.pr-celda[aria-pressed="true"] .pr-n { color: #24564f; }
.pr-fila-mas th { font-size: 25px; }
.pr-fila-mas td { padding: var(--f3) var(--f2); }
.pr-fila-mas .enlace { font-size: 15px; }

.pr-autonomo { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); column-gap: var(--f5); align-items: center; margin-top: var(--f4); padding: var(--f4) 0 var(--f4); border-bottom: 1px solid var(--borde); }
.pr-aut-cifra { display: flex; flex-direction: column; gap: 4px; }
.pr-celda-aut { width: auto; align-self: flex-start; padding: var(--f1) var(--f2); margin-left: calc(-1 * var(--f2)); }
.pr-celda-aut .pr-n { font-size: 72px; }
.pr-aut-unidad { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: .04em; color: var(--gris); }
.pr-aut-texto { display: flex; flex-direction: column; gap: var(--f2); }
.pr-aut-texto h3 em { font-style: italic; color: var(--teal); }

.pr-letra-grande { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f5); margin-top: var(--f5); }
body.home .pr-letra-grande p { font-size: 15px; color: var(--gris); }
.pr-letra-grande strong { color: var(--grafito); font-weight: 500; }

/* ───── 3 · en todos los planes ───── */
.pr-cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--borde); }
.pr-cuatro > div { display: flex; flex-direction: column; gap: var(--f2); padding: var(--f4) var(--f4) 0 0; }
.pr-cuatro > div + div { border-left: 1px solid var(--borde); padding-left: var(--f4); }
body.home .pr-cuatro p { font-size: 15px; line-height: 1.6; color: var(--gris); }

/* ───── 4 · la IA ───── */
.pr-ia-derecha { display: flex; flex-direction: column; gap: var(--f5); }
.pr-rinde { border: 1px solid var(--borde); border-radius: 8px; background: #fbfaf7; padding: var(--f4); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: var(--f2); }
body.home p.pr-rinde-sub, body.home p.pr-rinde-pie { font-size: 14px; color: var(--gris); }
.pr-rinde-lista { margin: var(--f1) 0 0; border-top: 1px solid var(--borde); }
.pr-rinde-lista > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--f3); padding: 13px 0; border-bottom: 1px solid #e4ded2; }
.pr-rinde-lista dt { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 15px; font-weight: 300; color: var(--grafito); }
.pr-rinde-lista dd { margin: 0; font-family: 'EB Garamond', Garamond, serif; font-size: 23px; font-weight: 400; color: #7a5276; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.home p.pr-rinde-pie { padding-left: var(--f2); border-left: 2px solid var(--malva); }

.pr-tokens { display: flex; flex-direction: column; gap: var(--f3); }
body.home .pr-tokens > p { font-size: 16px; color: var(--gris); }
.pr-barras { display: flex; flex-direction: column; gap: var(--f3); }
.pr-barra { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.pr-barra-t { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 14px; font-weight: 400; color: var(--grafito); }
.pr-barra-lin { display: block; height: 8px; background: rgba(207, 200, 185, .45); border-radius: 4px; overflow: hidden; }
.pr-barra-rel { display: block; height: 100%; width: var(--ancho); min-width: 4px; background: var(--grafito); border-radius: 4px; transform-origin: left; }
.pr-barra-rel.pr-barra-sib { background: var(--malva); }
html.js .pr-barras .pr-barra-rel { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.16, .7, .3, 1); }
html.js .pr-tokens.visto .pr-barra-rel { transform: none; }
.pr-barra-n { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 13px; font-weight: 400; color: var(--gris); }
.pr-razones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--borde); }
.pr-razones li { padding: var(--f2) 0; border-bottom: 1px solid #e4ded2; font-size: 15px; line-height: 1.6; color: var(--gris); }
.pr-razones strong { color: var(--grafito); font-weight: 500; }

body.home p.pr-claude { font-size: 15px; color: var(--gris); border-left: 2px solid var(--malva); padding-left: var(--f3); }
.pr-claude strong { color: var(--grafito); font-weight: 500; }

/* ───── 5 · comparativa ───── */
.pr-comp-marco { overflow-x: auto; border-top: 1px solid var(--borde); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.pr-comp-marco:focus-visible { outline: 2px solid var(--teal-texto); outline-offset: 4px; }
.pr-comp-tabla { width: 100%; min-width: 1080px; border-collapse: collapse; }
.pr-comp-tabla th, .pr-comp-tabla td { border-bottom: 1px solid #e4ded2; padding: 13px 8px; text-align: left; vertical-align: middle; }
.pr-comp-tabla thead th { vertical-align: bottom; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--gris); border-bottom: 1px solid var(--borde); }
.pr-comp-tabla .pr-c-nombre { position: sticky; left: 0; z-index: 1; background: var(--papel); min-width: 170px; padding-left: 0; }
.pr-comp-tabla tbody .pr-c-nombre { font-family: 'EB Garamond', Garamond, serif; font-size: 21px; font-weight: 400; color: var(--tinta); line-height: 1.2; }
.pr-c-plan { display: block; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 13px; font-weight: 300; color: var(--gris); margin-top: 2px; }
.pr-c-precio { white-space: nowrap; }
.pr-c-cifra { font-weight: 400; font-family: 'EB Garamond', Garamond, serif; font-size: 23px; color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; }
.pr-c-sabbia th, .pr-c-sabbia td { background: rgba(127, 184, 175, .13); border-bottom-color: var(--teal-claro); }
.pr-c-sabbia .pr-c-nombre { background: #e5ede8; box-shadow: inset 2px 0 0 var(--teal); padding-left: 13px; }
.pr-c-sabbia .pr-c-cifra { color: var(--teal-hondo); }
/* las marcas: un punto lleno (sí), medio (con límites), una raya (no); siempre con su palabra */
.m { display: inline-flex; align-items: center; gap: 7px; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.3; }
.m::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.m.si { color: var(--teal-texto); }
.m.si::before { background: var(--teal); }
.m.parcial { color: var(--gris); }
.m.parcial::before { border: 1px solid var(--teal); background: linear-gradient(90deg, var(--teal) 50%, transparent 50%); width: 8px; height: 8px; }
.m.no { color: var(--gris-claro); }
.m.no::before { width: 10px; height: 10px; border-radius: 0; background: linear-gradient(#9a948a, #9a948a) center / 100% 1px no-repeat; }
.pr-desliza { display: none; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 13px; color: var(--gris); margin: var(--f1) 0 0; }
.pr-comp-notas { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: var(--f5); margin-top: var(--f4); align-items: start; }
body.home p.pr-juntar { font-weight: 400; font-family: 'EB Garamond', Garamond, serif; font-size: 21px; line-height: 1.45; color: var(--grafito); }
.pr-juntar strong { font-weight: 400; color: var(--teal-hondo); white-space: nowrap; }
body.home p.pr-fuente { font-size: 13px; line-height: 1.6; color: var(--gris); }

/* ───── tamaños intermedios y móvil ───── */
@media (max-width: 1100px) {
  .pr-cuatro { grid-template-columns: 1fr 1fr; }
  .pr-cuatro > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .pr-cuatro > div:nth-child(n+3) { border-top: 1px solid var(--borde); margin-top: var(--f4); }
}
@media (max-width: 1080px) {
  .pr-desliza { display: block; }
}
@media (max-width: 900px) {
  .pr-autonomo, .pr-letra-grande, .pr-comp-notas { grid-template-columns: 1fr; row-gap: var(--f3); }
  .pr-calc { padding: var(--f4) var(--f3); }
  .pr-matriz thead th:first-child { width: 30%; }
}
@media (max-width: 560px) {
  .pr-cabeza .bloque-int { padding-top: var(--f5); }
  .pr-cifra { font-size: 76px; }
  .pr-cifra-linea { min-height: 76px; }
  .pr-cifra.pr-medida { font-size: 44px; }
  .pr-calc { padding: var(--f3); }
  .pr-opciones .mod { min-height: 44px; }
  .pr-comp-tabla .pr-c-nombre { min-width: 118px; max-width: 118px; }
  .pr-comp-tabla tbody .pr-c-nombre { font-size: 18px; }
  .pr-incluye li { flex-direction: column; gap: 2px; }
  .pr-inc-v { text-align: left; white-space: normal; }
  .pr-cuatro { grid-template-columns: 1fr; }
  .pr-cuatro > div, .pr-cuatro > div + div { border-left: 0; padding: var(--f3) 0 0; }
  .pr-cuatro > div + div { border-top: 1px solid var(--borde); margin-top: var(--f3); }
  /* la matriz en el móvil: cada fila, su nombre arriba y las tres cifras debajo */
  .pr-matriz, .pr-matriz tbody, .pr-matriz tr, .pr-matriz th, .pr-matriz td { display: block; }
  .pr-matriz thead { display: none; }
  .pr-matriz tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--borde); padding-bottom: var(--f2); }
  .pr-matriz tbody th { grid-column: 1 / -1; border: 0; padding: var(--f3) 0 var(--f1); font-size: 23px; }
  .pr-matriz tbody td { border: 0; }
  .pr-matriz tbody td::before { content: attr(data-gb); display: block; padding: 0 var(--f1); font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 13px; font-weight: 400; color: var(--teal-texto); }
  .pr-celda { padding: 6px var(--f1) var(--f1); flex-wrap: wrap; font-size: 20px; }
  .pr-celda .pr-n { font-size: 36px; }
  .pr-fila-mas td { grid-column: 1 / -1; padding: 0 0 var(--f2); }
  .pr-fila-mas td::before { content: none; }
  .pr-celda-aut .pr-n { font-size: 60px; }
  body.home p.pr-juntar { font-size: 19px; }
  .pr-rinde { padding: var(--f3); }
  .pr-rinde-lista > div { flex-direction: column; gap: 0; }
}
