/* /precios (4 nov, versión B: sin cifras, todo a la demo), con el kit v2. El kit (paginas.css) pone los componentes; aquí, lo que solo
   tiene esta página: las dos maneras de empezar de la cabecera, la tabla de un vistazo con sus tres grupos (S3), las ocho tarjetas con
   «Cómo se paga» donde una página de planes pone el precio (S4; Reviot Reseñas, aparte a la vista), lo que mueve el precio y los dos
   casos que no cuestan lo mismo (S5), los cuatro pasos de la demo en su raíl (S6), la agenda de la banda (S7), las seis maneras de
   empezar (S8) y las cinco preguntas que se copian (S10). Solo transform y opacity en lo que se mueve; con «reducir movimiento», quieto. */

/* ── S2: la cabecera, en una columna (sin pieza a la derecha: la tabla de S3 hace ese papel justo debajo) y las dos maneras de empezar */
.pr-cab .contenedor{display:grid;gap:22px;justify-items:start}
.pr-cab .titular{max-width:15.5em}
.pr-cab .entradilla{max-width:36em}
.pr-cab-acciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:980px;margin-top:8px}
.pr-cab-accion{display:grid;gap:14px;align-content:start;justify-items:start;padding:16px 20px 18px 16px;border-radius:20px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea),var(--sombra-tarjeta)}
.pr-cab-accion p{max-width:30em;padding-left:4px;font-size:14px;line-height:1.5;color:var(--texto-3)}
@media (max-width:760px){
  .pr-cab .contenedor{gap:18px}
  .pr-cab-acciones{grid-template-columns:minmax(0,1fr)}
  .pr-cab-accion{padding:0;background:none;box-shadow:none;justify-items:stretch;gap:10px}
  .pr-cab-accion+.pr-cab-accion{margin-top:6px}
  .pr-cab-accion p{padding:0;font-size:13.5px}
}

/* ── Las tablas de S3 y S5 */
.pr-tabla{margin-top:clamp(40px,5vw,64px)}
.pr-tabla thead>tr>:first-child{width:24%}
.pr-tabla tbody th a{color:var(--texto);text-decoration:underline;text-decoration-color:var(--linea-3);text-underline-offset:4px}
.pr-tabla tbody th a:hover{text-decoration-color:currentColor}

/* S3: los tres grupos (Gratis, Tu panel, Aparte), cada uno con su rótulo en una banda que cruza la fila; «Cómo se paga», en tinta */
.pr-vistazo td:last-child{color:var(--texto);font-weight:560}
.pr-vistazo tbody>tr:first-child>*{padding-top:52px}
.pr-vistazo tbody+tbody>tr:first-child>*{border-top:1px solid var(--linea-2)}
.pr-vistazo th[data-rotulo]::before{content:attr(data-rotulo);position:absolute;left:0;top:0;width:var(--ancho-fila,100%);height:34px;padding:8px 22px 0;background:var(--lienzo);box-shadow:0 1px 0 var(--linea);font-size:12.5px;font-weight:600;color:var(--texto-3);pointer-events:none}
.pr-cierre{margin-top:28px}
@media (max-width:760px){.pr-vistazo th[data-rotulo]::before{padding-left:14px}.pr-vistazo tbody>tr:first-child>*{padding-top:48px}}
/* En el teléfono, la tabla sigue siendo una tabla, sin desplazarse de lado: cada fila, el servicio a la izquierda y, a la derecha, cómo
   se paga y debajo qué es. Desplazándose, «Cómo se paga», lo que se busca aquí, quedaba fuera de la pantalla. */
@media (max-width:600px){
  .pr-vistazo :where(.tabla,thead,tbody){display:block}
  .pr-vistazo tr{position:relative;display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);column-gap:14px;padding:15px 14px 16px}
  .pr-vistazo :is(th,td){position:static;padding:0!important;border:0!important}
  .pr-vistazo tr>:first-child{grid-row:1 / span 2}
  .pr-vistazo tr>:nth-child(3){grid-column:2;grid-row:1}
  .pr-vistazo tr>:nth-child(2){grid-column:2;grid-row:2;margin-top:4px;font-size:13.5px;line-height:1.45}
  .pr-vistazo thead tr{padding-block:13px 11px;background:var(--lienzo);box-shadow:0 1px 0 var(--linea)}
  .pr-vistazo thead th:nth-child(2){display:none}
  .pr-vistazo tbody tr+tr{box-shadow:0 -1px 0 var(--linea)}
  .pr-vistazo tbody+tbody{box-shadow:0 -1px 0 var(--linea-2)}
  .pr-vistazo tbody>tr:first-child{padding-top:50px}
  .pr-vistazo th[data-rotulo]::before{width:100%}
}

/* ── S4: las ocho tarjetas. En el escritorio, dos por fila y alineadas por dentro (subgrid): el «cómo se paga» de las dos, a la misma
   altura, como el precio en una página de planes. En el móvil, cada grupo se desliza con el dedo, todo abierto. */
.pr-rotulo{display:flex;align-items:center;gap:16px;margin:clamp(48px,6vw,80px) 0 16px;font-size:14px;font-weight:600;color:var(--texto-2)}
.pr-rotulo::after{content:"";flex:1;height:1px;background:var(--linea-2)}
.bloque-cab+.pr-rotulo{margin-top:0}
.pr-plan{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:18px;padding:clamp(24px,2.6vw,36px);border-radius:24px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea),var(--sombra-tarjeta);scroll-margin-top:calc(var(--cab) + 96px)}
.pr-plan-cab{display:flex;align-items:center;gap:14px}
.pr-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--hundido);color:var(--texto)}
.pr-ic .ic{stroke-width:1.5}
.pr-plan h3{font-size:clamp(22px,1.9vw,27px);font-weight:450;font-stretch:110%;letter-spacing:-.022em;line-height:1.15}
.pr-que{font-size:16px;line-height:1.55;color:var(--texto-2);max-width:34em}
.pr-pago{display:grid;gap:6px;align-content:start;padding:18px 0 20px;border-block:1px solid var(--linea)}
.pr-pago b{font-size:13px;font-weight:600;color:var(--texto-3)}
.pr-pago span{display:block;max-width:15em;font-size:clamp(24px,2.3vw,31px);font-weight:340;font-stretch:116%;letter-spacing:-.035em;line-height:1.1;color:var(--texto);text-wrap:balance}
.pr-pago span::first-letter{text-transform:uppercase}
.pr-pago small{margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--texto-2)}
.pr-incluye{align-content:start}
.pr-incluye>li{padding:10px 0 10px 36px;font-size:15px;line-height:1.52}
.pr-incluye>li::before{top:10px}
.pr-incluye>li::after{top:16px}
.pr-incluye>li:first-child{padding-top:0}
.pr-incluye>li:first-child::before{top:0}
.pr-incluye>li:first-child::after{top:6px}
.pr-incluye a{color:var(--texto);text-underline-offset:3px;text-decoration-color:var(--linea-3)}
.pr-pie{display:grid;gap:12px;align-content:end;padding-top:18px;border-top:1px solid var(--linea)}
.pr-pie p{font-size:14.5px;line-height:1.55;color:var(--texto-2)}
.pr-pie b{color:var(--texto);font-weight:600}
.pr-cta{justify-self:start;margin-top:6px}
.pr-mas a{font-weight:600;color:var(--texto);text-decoration-color:var(--linea-3);text-underline-offset:3px}
.pr-mas a:hover{text-decoration-color:currentColor}
/* Reviot Reseñas, una suscripción aparte: su tarjeta, recortada como un vale suelto */
.pr-propia{background:var(--lienzo);box-shadow:none;outline:1.5px dashed var(--linea-3);outline-offset:-1.5px}
.pr-propia .pr-ic{background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea)}
.pr-propia :is(.pr-pago,.pr-pie){border-color:var(--linea-2)}
/* La Vigilancia: lo que vuelve a mirar cada mes (las IA, tus reseñas, lo que sugiere Google y tu primera página), unido por puntos */
.pr-ciclo{display:grid;grid-template-columns:auto minmax(6px,1fr) auto minmax(6px,1fr) auto minmax(6px,1fr) auto;align-items:center;gap:12px 6px;align-self:end;padding-top:18px;border-top:1px solid var(--linea)}
.pr-ciclo>span{display:flex;align-items:center;gap:3px;height:38px;padding:0 9px;border-radius:11px;background:var(--hundido);color:var(--texto)}
.pr-ciclo img,.pr-ciclo .ic{width:17px;height:17px}
.pr-ciclo>b{height:2px;background:radial-gradient(circle,var(--linea-3) 1px,transparent 1.5px) 0 50%/6px 2px repeat-x;transform-origin:0 50%}
.pr-ciclo>em{grid-column:1 / -1;grid-row:1;justify-self:start;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px 0 10px;border-radius:999px;background:var(--tinta);font-size:13px;font-style:normal;font-weight:600;color:#fff}
.pr-ciclo>em .ic{width:15px;height:15px}
.pr-planes.anima .pr-ciclo>b{transform:scaleX(0)}
.pr-planes.en .pr-ciclo>b{transform:none;transition:transform .5s var(--e) calc(var(--i,0) * 70ms + .6s)}
/* Llegar desde una hermana (/precios#vigilancia): la tarjeta se marca una vez */
.pr-plan::after{content:"";position:absolute;inset:-2px;border-radius:26px;box-shadow:0 0 0 2px var(--naranja);opacity:0;pointer-events:none}
.pr-plan:target::after{animation:pr-aqui 2.6s ease .35s both}
@keyframes pr-aqui{0%,100%{opacity:0}12%,70%{opacity:1}}
@media (min-width:761px){
  .pr-planes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pr-plan{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:18px}
}
/* En el teléfono se ve una tarjeta cada vez: cada una, de su alto. Estiradas a la más alta del grupo, las cortas (el análisis gratis,
   las alertas) quedaban con un hueco de 100–200 px en medio */
@media (max-width:760px){
  .pr-planes.desliza{align-items:flex-start}
  .pr-plan{padding:22px 20px 24px;border-radius:22px}
  .pr-pago span{font-size:25px}
}
.pr-planes.anima>*{opacity:0;transform:translateY(14px)}
.pr-planes.en>*{opacity:1;transform:none;transition:opacity .45s ease calc(var(--i,0) * 70ms),transform .65s var(--e) calc(var(--i,0) * 70ms)}
.pr-planes.anima .pr-incluye>li::before{transform:scale(.5);opacity:0}
.pr-planes.anima .pr-incluye>li::after{transform:none}
.pr-planes.en .pr-incluye>li::before{transform:none;opacity:1;transition:transform .45s var(--e) calc(var(--i,0) * 70ms + .3s),opacity .2s ease calc(var(--i,0) * 70ms + .3s)}
.pr-planes.en .pr-incluye>li::after{transform:scaleX(0);transition:transform .4s cubic-bezier(.6,0,.3,1) calc(var(--i,0) * 70ms + .55s)}

/* ── S5: lo que mueve el precio; la columna de Reviot, en su panel hundido */
.pr-depende tbody th{font-size:15.5px}
.pr-depende tbody th .ic{display:block;width:22px;height:22px;margin-bottom:10px;color:var(--texto-3)}
.pr-depende :is(td,th):last-child{background:var(--hundido)}
.pr-depende td:last-child{color:var(--texto)}
.pr-depende thead th:last-child{color:var(--texto)}
/* Dos casos que parecen iguales: el momento en tinta de la página */
.pr-dos-casos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:36px clamp(36px,5vw,80px);align-items:center;margin-top:clamp(56px,7vw,96px)}
.pr-frase{margin:0;max-width:none;font-size:clamp(26px,2.5vw,36px)}
.pr-frase p{color:#fff}
.pr-frase p>.tenue{max-width:30em;margin-top:18px;font-size:clamp(17px,1.35vw,19px);font-weight:400;font-stretch:100%;letter-spacing:0;line-height:1.55;color:rgba(255,255,255,.66)}
.pr-casos{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px}
.pr-caso{display:grid;gap:12px;padding:16px 16px 18px;border-radius:18px;background:var(--tarjeta);color:var(--texto);box-shadow:var(--sombra-flota)}
.pr-caso-t{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pr-caso-t img{width:16px;height:16px}
.pr-caso-t em{font-style:normal;padding:0 .2em;border-radius:.25em;background:var(--tuyo-suave);color:var(--tuyo)}
.pr-resena{display:grid;gap:8px;min-height:86px;align-content:center;padding:12px;border-radius:12px;background:var(--hundido)}
.pr-estrellas{display:flex;gap:3px}
.pr-estrellas i{width:13px;height:13px;background:var(--linea-3);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.pr-estrellas i.si{background:var(--tinta)}
.pr-resena .esq{background:var(--pista)}
.pr-serp{display:grid;gap:6px;min-height:86px;align-content:center}
.pr-serp li{display:flex;align-items:center;gap:8px;height:24px;padding:0 10px;border-radius:8px;background:var(--hundido)}
.pr-serp li .esq{flex:1;background:var(--pista)}
.pr-serp li.foro{background:var(--malo-suave);color:var(--malo-texto)}
.pr-serp li.foro .ic{width:15px;height:15px}
.pr-serp li.foro .esq{background:rgba(203,31,54,.18)}
.pr-via{font-size:13px;font-weight:600;line-height:1.3}
.pr-ne{font-size:clamp(34px,3vw,46px);font-weight:250;line-height:1;color:rgba(255,255,255,.7)}
.pr-casos.anima>*{opacity:0;transform:translateY(14px)}
.pr-casos.en>*{opacity:1;transform:none;transition:opacity .5s ease,transform .7s var(--e)}
.pr-casos.en>.pr-ne{transition-delay:.25s}
.pr-casos.en>:last-child{transition-delay:.4s}
@media (max-width:999px){.pr-dos-casos{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .pr-depende tbody th{font-size:16.5px}
  .pr-depende td:last-child{margin-top:14px!important;padding:12px 14px;border-radius:12px}
  .pr-casos{gap:8px}
  .pr-caso{padding:12px 12px 14px}
  .pr-ne{font-size:28px}
}
/* A 320–360 px, «Primera página» en una línea no cabía y se salía de su tarjeta: el rótulo baja de renglón */
@media (max-width:400px){
  .pr-casos{gap:6px}
  .pr-caso{padding:10px 10px 12px}
  .pr-caso-t{align-items:flex-start;white-space:normal;line-height:1.25}
  .pr-resena{padding:10px}
  .pr-estrellas{gap:2px}
  .pr-estrellas i{width:11px;height:11px}
  .pr-ne{font-size:24px}
}

/* ── S6: las tres razones y los cuatro pasos de la demo, con su número grande sobre un raíl que se traza una vez */
.pr-razones{max-width:40em}
.pr-h3{margin:clamp(72px,9vw,112px) 0 clamp(28px,3.4vw,40px);font-size:clamp(24px,2.2vw,30px);font-weight:450;font-stretch:110%;letter-spacing:-.022em;line-height:1.2}
.pr-pasos{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.pr-pasos::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--linea-3);transform-origin:0 50%}
.pr-pasos>li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pr-paso-n{position:relative;padding-right:14px;background:var(--fondo);font-size:44px;font-weight:250;font-stretch:118%;letter-spacing:-.06em;line-height:1;color:var(--texto);font-variant-numeric:tabular-nums}
.pr-pasos p{font-size:15.5px;line-height:1.55;color:var(--texto-2)}
.pr-pasos p b{display:block;margin-bottom:6px;font-size:17.5px;font-weight:560;line-height:1.35;color:var(--texto)}
.pr-quien{margin-top:auto;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;border-radius:999px;background:var(--hundido);font-size:13px;font-weight:600;color:var(--texto)}
.pr-quien::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tinta)}
.pr-quien.tu::before{background:var(--naranja)}
.pr-pasos.anima::before{transform:scaleX(0)}
.pr-pasos.en::before{transform:none;transition:transform 1.4s var(--e) .1s}
.pr-pasos.anima>li{opacity:0;transform:translateY(12px)}
.pr-pasos.en>li{opacity:1;transform:none;transition:opacity .45s ease calc(var(--i,0) * 160ms + .1s),transform .65s var(--e) calc(var(--i,0) * 160ms + .1s)}
@media (max-width:999px){
  .pr-pasos{grid-template-columns:minmax(0,1fr);gap:28px}
  .pr-pasos::before{left:21px;right:auto;top:8px;bottom:8px;width:1px;height:auto;transform-origin:50% 0}
  .pr-pasos.anima::before{transform:scaleY(0)}
  .pr-pasos.en::before{transform:none}
  .pr-pasos>li{padding-left:68px;gap:10px}
  .pr-paso-n{position:absolute;left:0;top:0;padding:0 0 10px;font-size:34px}
  .pr-quien{margin-top:4px}
}

/* ── S7: la agenda de la demo, a la derecha de la banda */
.pr-agenda{gap:8px;padding:16px}
.pr-agenda-cab{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--tarjeta);color:var(--texto);font-size:14.5px}
.pr-agenda-cab .ic{width:18px;height:18px}
.pr-agenda-cab span{margin-left:auto;padding:3px 10px;border-radius:999px;background:var(--hundido);font-size:12.5px;font-weight:600}
.pr-agenda-l{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:14.5px;line-height:1.35;color:rgba(255,255,255,.86)}
.pr-agenda-l i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--naranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.pr-agenda-l.precio{background:var(--tarjeta);box-shadow:none;color:var(--texto);font-weight:600}
.banda-cta.anima .pr-agenda>*{opacity:0;transform:translateY(10px)}
.banda-cta.en .pr-agenda>*{opacity:1;transform:none;transition:opacity .45s ease,transform .6s var(--e)}
.banda-cta.en .pr-agenda>:nth-child(2){transition-delay:.2s}.banda-cta.en .pr-agenda>:nth-child(3){transition-delay:.35s}.banda-cta.en .pr-agenda>:nth-child(4){transition-delay:.5s}

/* ── S8: por dónde empezar, con los dibujos de «¿Qué necesitas?» de la portada */
.pr-empezar>article{display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px;border-radius:20px;background:var(--tarjeta);box-shadow:0 0 0 1px var(--linea)}
.pr-nec{display:grid;place-items:center;width:44px;height:44px;margin-bottom:8px;border-radius:12px;background:var(--hundido);color:var(--texto)}
.pr-nec svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pr-empezar h3{font-size:19px}
.pr-empezar p{font-size:15px;line-height:1.55;color:var(--texto-2)}
.pr-empezar a{color:var(--texto);font-weight:560;text-underline-offset:3px;text-decoration-color:var(--linea-3)}
.pr-empezar a:hover{text-decoration-color:currentColor}
.pr-empezar.anima>*{opacity:0;transform:translateY(12px)}
.pr-empezar.en>*{opacity:1;transform:none;transition:opacity .45s ease calc(var(--i,0) * 60ms),transform .6s var(--e) calc(var(--i,0) * 60ms)}
.pr-perfiles{max-width:46em}
.pr-no-tit b{font-size:clamp(21px,1.8vw,26px);font-weight:450;font-stretch:110%;letter-spacing:-.02em;line-height:1.2;color:var(--texto)}
.pr-empezar~.no-es-para-ti .lista-no{grid-template-columns:minmax(0,1fr)}
.pr-empezar~.no-es-para-ti .lista-no>li:nth-child(2){border-top:1px solid var(--linea);padding-top:16px}
.pr-empezar~.no-es-para-ti .lista-no>li:nth-child(2)::before{top:16px}
@media (min-width:761px){.pr-empezar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media (min-width:761px) and (max-width:999px){.pr-empezar{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── S10: las cinco preguntas, para llevárselas a cualquier proveedor */
.pr-firmar tbody th{font-size:17px;font-weight:560;line-height:1.4}
/* El 42 % solo en la tabla: en el teléfono cada pregunta es una tarjeta y, con él, se partía en tres renglones junto a un hueco */
@media (min-width:761px){.pr-firmar tbody th{width:42%}}
.pr-firmar td{font-size:15.5px}
.pr-copiar{gap:9px;margin-top:16px}
.pr-copiar::before{display:none}
.pr-copiar[hidden]{display:none}
.pr-copiar .ic{width:18px;height:18px}
.pr-copiar.hecho{border-color:var(--tinta)}
.pr-firmar~.frase-destacada{max-width:25em}
.pr-firmar+.pr-copiar+.frase-destacada{margin-top:clamp(56px,7vw,96px)}
@media (max-width:760px){.pr-copiar{width:100%}}

@media (prefers-reduced-motion:reduce){
  .pr-plan:target::after{animation:none;opacity:1}
}