/* ═══════════════════════════════════════════════════════════════
   PRICING — una tarjeta por servicio.

   Medidas tomadas de la referencia (capturas de 2523 px de ancho):
     · titular centrado, ~110 px, y su párrafo debajo también centrado
     · tarjetas de esquinas grandes, ~28 px, sobre un gris muy claro
     · rótulo pequeño en acento sobre el nombre en versalitas
     · el hueco del precio muy grande, y debajo el párrafo
     · lista con palomitas de acento
     · botón ancho de lado a lado, en píldora

   El prefijo es .pr-planes y no .pr a secas: css/proyecto.css ya usa
   .pr para la página de una obra, y las dos podrían coincidir el día
   que alguien enlace mal una hoja.
   ═══════════════════════════════════════════════════════════════ */

.pr-planes {
  background: var(--bg);
  /* Poco relleno abajo: debajo va el bloque de preguntas, que trae el
     suyo. Con los dos generosos quedaba un desierto blanco entre la
     garantía y el titular de "Got Questions?". */
  padding: calc(var(--nav-alto) + clamp(34px, 7vh, 96px)) var(--hd-pad)
           clamp(28px, 4.5vh, 66px);
}

.pr-planes-dentro {
  max-width: var(--ancho-max);
  margin: 0 auto;
}


/* ── El encabezado ─────────────────────────────────────────────────
   Centrado, al revés que /blog y /portfolio. No es incoherencia: allí
   el titular abre una lista que se lee de izquierda a derecha, y aquí
   abre una comparación entre cosas puestas en fila. Un titular centrado
   sobre una fila simétrica se lee como su eje. */
.pr-cabeza {
  text-align: center;
  /* Bastante aire, y no por gusto: con un titular de este tamaño, un
     hueco pequeño debajo lo deja pegado a las tarjetas y las cuatro
     parecen colgar de él. Separándolo, el encabezado se lee como lo que
     es —la entrada de la sección— y las tarjetas empiezan solas.

     En vh para que crezca en pantallas altas, que es donde más se nota
     lo apretado, y no se coma la pantalla en un portátil. */
  margin-bottom: clamp(56px, 12vh, 165px);
}

.pr-titular {
  font-size: clamp(38px, 6.4vw, 108px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--tinta-alta);
  /* Y algo más de sitio entre el titular y su párrafo: son dos cosas
     distintas, no dos renglones del mismo bloque. */
  margin-bottom: clamp(18px, 3.2vh, 40px);
}

/* La medida corta es deliberada: centrado, un párrafo ancho obliga al
   ojo a buscar dónde empieza cada renglón, porque el margen izquierdo
   deja de ser una referencia fija. */
.pr-entrada {
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.62;
  color: var(--tinta);
}


/* ── Las tarjetas ──────────────────────────────────────────────────
   Cuatro, no tres como la referencia. auto-fit con un mínimo deja que
   el navegador decida cuántas caben: cuatro en pantalla ancha, dos en
   una media y una en el teléfono, sin un solo punto de corte escrito
   para eso. */
.pr-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  align-items: stretch;
}

.pr-tarjeta {
  /* Columna con el botón empujado al fondo. Las listas tienen largos
     distintos y sin esto cada botón quedaría a una altura, que es lo que
     hace que una fila de tarjetas parezca desordenada. */
  display: flex;
  flex-direction: column;

  background: var(--card);
  border: 1px solid transparent;
  border-radius: clamp(16px, 1.6vw, 28px);
  padding: clamp(22px, 2.2vw, 36px);
  /* opacity va nombrada aquí a propósito. .reveal declara su propia
     transición en base.css, pero esta regla llega después en la cascada
     con la misma especificidad y la sustituye ENTERA: sin nombrarla, la
     tarjeta aparecía de golpe al entrar en pantalla en vez de fundirse,
     y el escalonado no se notaba porque no había nada que escalonar. */
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .45s ease;
}
.pr-tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(26, 23, 20, .09);
}

/* La destacada se marca con el contorno de acento y no con un fondo
   distinto: cambiarle el fondo la sacaría de la familia, y lo que se
   quiere es señalarla, no separarla. */
/* --pr-color lo escribe el PHP en cada tarjeta con el color de su
   servicio, sacado del hero. El var(--acento) de respaldo cubre el caso
   de un servicio sin diapositiva: mejor el acento del sitio que quedarse
   sin color. */
.pr-tarjeta.es-destacada { border-color: var(--pr-color, var(--acento)); }


/* ── La cabecera de la tarjeta ─────────────────────────────────── */
.pr-rotulo {
  font-size: clamp(11.5px, .88vw, 13.5px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pr-color, var(--acento));
  margin-bottom: 8px;
}

.pr-nombre {
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tinta-alta);
  margin-bottom: clamp(10px, 1.2vw, 16px);
}

/* El hueco del precio. Ocupado aunque no haya cifra: si se quitara, las
   tarjetas perderían el escalón que separa el nombre del texto y las
   cuatro se leerían como un bloque continuo. */
.pr-cifra {
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--tinta-alta);
  padding-bottom: clamp(14px, 1.8vw, 22px);
  margin-bottom: clamp(14px, 1.8vw, 22px);
  border-bottom: 1px solid var(--border);
}

/* Sin cifra, más pequeño y en gris. A tamaño de precio, "Custom quote"
   grita como si fuera uno, y lo que hace es justo lo contrario:
   anunciar que aquí no hay número. */
.pr-cifra.es-sin-cifra {
  font-size: clamp(18px, 1.6vw, 25px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--muted);
}

.pr-gancho {
  font-size: clamp(13.5px, 1vw, 15.5px);
  line-height: 1.6;
  color: var(--tinta);
  margin-bottom: clamp(16px, 2vw, 26px);
}


/* ── Lo que incluye ────────────────────────────────────────────── */
.pr-incluye {
  list-style: none;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  padding: 0;
  /* Se come el espacio que sobra, y así el botón acaba pegado abajo en
     todas las tarjetas por larga que sea su lista. */
  flex: 1;
}

.pr-incluye li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(13px, .98vw, 15px);
  line-height: 1.5;
  color: var(--tinta-alta);
  margin-bottom: 11px;
}

.pr-tic {
  flex-shrink: 0;
  width: 16px; height: 16px;
  /* Baja un pelo para caer en el centro óptico de la primera línea, no
     en su borde de arriba. */
  margin-top: 2px;
  fill: none; stroke: var(--pr-color, var(--acento)); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}


/* ── El botón ──────────────────────────────────────────────────── */
.pr-btn {
  display: block;
  text-align: center;
  padding: 15px 20px;
  border: 1px solid var(--tinta-alta);
  border-radius: 99px;
  background: transparent;
  color: var(--tinta-alta);
  text-decoration: none;
  font-size: clamp(12.5px, .95vw, 14px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
/* Al acercarse se llena del color de SU servicio. Es el momento en que
   la tarjeta dice de qué es, y de paso las cuatro dejan de comportarse
   como la misma tarjeta repetida. */
.pr-btn:hover {
  background: var(--pr-color, var(--tinta-alta));
  border-color: var(--pr-color, var(--tinta-alta));
  color: #fff;
}

/* El de la destacada va lleno desde el principio: es el único de los
   cuatro que se lee como una recomendación y no como una opción. */
.pr-tarjeta.es-destacada .pr-btn {
  background: var(--pr-color, var(--acento));
  border-color: var(--pr-color, var(--acento));
  color: #fff;
}
.pr-tarjeta.es-destacada .pr-btn:hover { filter: brightness(1.08); }


/* ── La garantía y el pie ──────────────────────────────────────── */
.pr-garantia {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin-top: clamp(30px, 5vh, 60px);
  padding: clamp(16px, 2vw, 24px);
  border: 1px dashed var(--border);
  border-radius: 99px;
  font-size: clamp(13px, 1vw, 15.5px);
  line-height: 1.5;
  color: var(--tinta);
  text-align: center;
}

.pr-escudo {
  flex-shrink: 0;
  width: 20px; height: 20px;
  fill: none; stroke: var(--acento); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.pr-faq {
  margin-top: clamp(18px, 3vh, 30px);
  text-align: center;
  font-size: clamp(13px, 1vw, 15px);
  color: var(--muted);
}
.pr-faq a {
  color: var(--tinta-alta);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: border-color .3s ease;
}
.pr-faq a:hover { border-color: var(--acento); }


/* ── Tamaños ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* La píldora de la garantía con dos renglones dentro deja un óvalo
     deforme. A este ancho se cuadra. */
  .pr-garantia { border-radius: clamp(14px, 4vw, 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .pr-tarjeta, .pr-btn { transition: none; }
  .pr-tarjeta:hover { transform: none; }
}


/* ── La segunda forma de contratar ─────────────────────────────────
   Solo la tiene Design: por proyecto o por tiempo. Va separada de la
   lista por una regla porque NO es una prestación más — meterla dentro
   de las palomitas la haría parecer algo que entra en el paquete, y es
   otra manera de comprar el mismo paquete.

   VA PLEGADA. Desplegada añadía cuatro renglones a la tarjeta de Design
   y, como la rejilla iguala alturas, estiraba las cuatro: tres tarjetas
   crecían por un texto que no era suyo. Cerrada ocupa una línea. */
.pr-alterna {
  margin-top: clamp(16px, 2.4vh, 26px);
  padding-top: clamp(14px, 2vh, 22px);
  border-top: 1px solid var(--border);
}

.pr-alterna-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;               /* Firefox */
  font-size: clamp(11px, .92vw, 13px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pr-color, var(--acento));
}
/* El triángulo que Safari y Chrome ponen por su cuenta. Sobra: ya hay
   un signo propio a la derecha, y dos indicadores compiten. */
.pr-alterna-resumen::-webkit-details-marker { display: none; }

/* El signo de interrogación, en círculo. Se gira al abrir para que el
   mismo elemento diga «hay algo» y «ya está abierto» sin añadir otro. */
.pr-alterna-signo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: transform .3s cubic-bezier(.16,1,.3,1), background .25s ease, color .25s ease;
}
.pr-alterna-resumen:hover .pr-alterna-signo {
  background: var(--pr-color, var(--acento));
  color: #fff;
}
.pr-alterna[open] .pr-alterna-signo { transform: rotate(180deg); }

.pr-alterna-texto {
  margin-top: clamp(10px, 1.4vh, 14px);
  font-size: clamp(12.5px, 1vw, 14px);
  line-height: 1.6;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .pr-alterna-signo { transition: none; }
  .pr-alterna[open] .pr-alterna-signo { transform: none; }
}