/* Velaccio — paquetes de Creative Engine.
   Provenance ref: VEL-PROV-9K4XQ7M2

   Va justo debajo del carrusel de beneficios: la página acaba de listar
   todo lo que incluye Creative Engine, así que aquí se dice cuánto cuesta
   y en qué cantidad entra cada cosa en cada paquete. Los datos salen del
   documento de propuesta de Creative Engine (Launch, Growth, Scale,
   Custom) y no se añade nada que no esté ahí.

   LA FORMA. Fichas claras sobre el negro de la página, con la silueta de
   "ficha": una pestaña que sube por la derecha y otra que baja por la
   izquierda, unidas al cuerpo por una S. Todo es CSS, sin SVG ni
   clip-path: la tarjeta son tres cajas apiladas — pestaña, cuerpo,
   pestaña — y la S sale de sumar dos arcos del mismo radio: la esquina
   convexa de la pestaña (border-radius) y un chaflán cóncavo pintado con
   un radial-gradient en un pseudo-elemento que asoma por el lado de la
   pestaña. Como ambos radios valen la mitad del alto de la pestaña, no
   queda tramo recto entre los dos y la curva es continua.

   Cada pestaña solapa 1 px con el cuerpo, y cada chaflán 1 px con la
   pestaña y con el cuerpo: gris sobre gris no se ve, y así el redondeo
   a subpíxel nunca deja una raya negra en la junta.

   El color de la ficha es una sola variable, --pc-ink: blanco ahora; si
   algún día conviene bajarlo a plata, es esa línea.

   DENTRO. El nombre del paquete en la pestaña de arriba; una frase en
   negro que lo sitúa; el precio grande y fino en gris; lo que incluye;
   el botón; y en la pestaña de abajo tres puntos con el color del
   paquete: uno, dos o tres encendidos según el nivel. Ese es el único
   color de la sección.

   Sizing: la página hereda html{font-size:.625vw} de main-style.css, así
   que rem sigue al viewport. Igual que en ce-about.css, todo lo que tiene
   que ser legible va en clamp de px/vw. */

/* Inter ExtraBold, subconjunto latino (Google Fonts v20, licencia OFL).
   Se usa únicamente en .pc__big. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/inter-800-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.cepricing {
  position: relative;
  z-index: 1;
}

.cepricing .s-content {
  display: block;
  margin-bottom: clamp(32px, 3.6vw, 56px);
}

.cepricing .s-title {
  max-width: 14ch;
}

.cepricing .s-text {
  margin-top: clamp(14px, 1.6vw, 26px);
  max-width: 54ch;
  color: rgba(255, 255, 255, .74);
}

.cep-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  align-items: stretch;
}

/* ---- la ficha ---------------------------------------------------------- */

.pc {
  /* alto de la pestaña; la S mide la mitad de eso por cada arco */
  --pc-t: clamp(38px, 2.6vw, 50px);
  --pc-k: calc(var(--pc-t) / 2);
  --pc-r: clamp(18px, 1.25vw, 24px);
  --pc-pad: clamp(18px, 1.2vw, 24px);
  /* ancho de la parte plana de la pestaña de arriba; el % es el de la
     referencia, los topes evitan que en una tarjeta ancha se convierta en
     un estante. La de abajo no lleva ancho: la miden los puntos */
  --pc-top: clamp(190px, 49%, 240px);
  --pc-ink: #ffffff;
  --pc-accent: #2f7dff;

  position: relative;
  display: flex;
  flex-direction: column;
  color: #0b0b0c;
  font-family: "Acid Grotesk", system-ui, sans-serif;
}

.pc--launch { --pc-accent: #2f7dff; }
.pc--growth { --pc-accent: #ff5a1f; }
.pc--scale  { --pc-accent: #b23bff; }

/* pestañas */

.pc__tab {
  position: relative;
  flex: none;
  height: calc(var(--pc-t) + 1px);
  background: var(--pc-ink);
}

.pc__tab--top {
  align-self: flex-end;
  width: var(--pc-top);
  margin-bottom: -1px;
  /* arriba-izquierda: la mitad convexa de la S; arriba-derecha: esquina */
  border-radius: var(--pc-k) var(--pc-r) 0 0;
}

.pc__tab--bottom {
  align-self: flex-start;
  margin-top: -1px;
  border-radius: 0 0 var(--pc-k) var(--pc-r);
}

/* la mitad cóncava de la S: un cuadrado de lado k al que un círculo de
   radio k, centrado en la esquina que mira hacia fuera, le come el cuarto
   que no es tarjeta. Lo que queda es ficha y enlaza con tangente continua
   por un lado con el borde del cuerpo y por el otro con el de la pestaña */
.pc__tab::before {
  content: "";
  position: absolute;
  width: calc(var(--pc-k) + 1px);
  height: calc(var(--pc-k) + 1px);
  pointer-events: none;
}

.pc__tab--top::before {
  right: calc(100% - 1px);
  bottom: 0;
  background: radial-gradient(circle at 0 0,
      transparent calc(var(--pc-k) - .5px),
      var(--pc-ink) calc(var(--pc-k) + .5px));
}

.pc__tab--bottom::before {
  left: calc(100% - 1px);
  top: 0;
  background: radial-gradient(circle at 100% 100%,
      transparent calc(var(--pc-k) - .5px),
      var(--pc-ink) calc(var(--pc-k) + .5px));
}

/* nombre del paquete, en la pestaña de arriba, con su guión delante */
.pc__label {
  position: absolute;
  top: 0;
  right: var(--pc-pad);
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--pc-t);
  margin: 0;
  padding-top: .18em;
  color: #0b0b0c;
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: none;
  white-space: nowrap;
}

/* el guión engorda con el texto */
.pc__label::before {
  content: "";
  width: 14px;
  height: 2px;
  background: currentColor;
}

/* los puntos, en la pestaña de abajo. Van en flujo, con el mismo aire a
   cada lado, y es eso lo que da a la pestaña su ancho: los puntos quedan
   centrados en ella sea cual sea el tamaño */
.pc__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--pc-t);
  padding: 0 calc(var(--pc-pad) + 10px);
  transform: translateY(-5%);
}

.pc__dots i {
  display: block;
  width: clamp(10px, .7vw, 13px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, .16);
}

.pc--lvl1 .pc__dots i:nth-child(-n+1),
.pc--lvl2 .pc__dots i:nth-child(-n+2),
.pc--lvl3 .pc__dots i:nth-child(-n+3) {
  background: var(--pc-accent);
}

/* cuerpo */

.pc__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 1.5vw, 28px) var(--pc-pad) var(--pc-pad);
  background: var(--pc-ink);
  /* las dos esquinas que no tapa ninguna pestaña */
  border-radius: var(--pc-r) 0 var(--pc-r) 0;
}

/* ---- frase, precio, incluye, botón ------------------------------------ */

/* tres líneas reservadas aunque el texto ocupe una: así el precio cae a la
   misma altura en las tres fichas y se puede comparar de un vistazo (la
   frase de Scale necesita las tres en cuanto la columna baja de ~430 px) */
.pc__lead {
  margin: 0;
  padding: 0 .1em;
  min-height: 3.45em;
  color: #0b0b0c;
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.pc__big {
  margin: clamp(18px, 1.8vw, 30px) 0 0;
  padding: 0 .04em;
  color: #000000;
  /* Inter ExtraBold sólo para el precio: Acid Grotesk se queda en 700 y
     el número pedía más peso. Autoalojada como el resto de familias del
     sitio (font-src 'self' en nginx-snippets/velaccio-security-headers.conf):
     un solo woff2 con el subconjunto latino, que incluye el €. */
  font-family: "Inter", "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(42px, 3.7vw, 70px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}

/* el sufijo, a la base del número, en la sans del cuerpo y en media */
.pc__big small {
  margin-left: .3em;
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: .28em;
  font-weight: 500;
  letter-spacing: 0;
}

.pc__inc {
  display: block;
  margin-top: clamp(16px, 1.5vw, 24px);
  padding-top: clamp(12px, 1vw, 16px);
  border-top: 1px solid rgba(0, 0, 0, .14);
  color: rgba(0, 0, 0, .45);
  font-size: clamp(11px, .85vw, 13px);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pc__list {
  margin: clamp(6px, .6vw, 10px) 0 0;
  padding: 0;
  list-style: none;
}

.pc__list li {
  display: grid;
  grid-template-columns: 2.6ch minmax(0, 1fr);
  column-gap: clamp(10px, .9vw, 14px);
  align-items: baseline;
  padding: clamp(4px, .4vw, 6px) 0;
  color: rgba(0, 0, 0, .72);
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 500;
  line-height: 1.3;
}

.pc__list b {
  color: #0b0b0c;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* los conceptos sin cifra llevan un guión corto en la columna de números
   para que el texto no se salga de la rejilla */
.pc__list i {
  position: relative;
  display: block;
  height: 1em;
  font-style: normal;
}

.pc__list i::after {
  content: "";
  position: absolute;
  right: 0;
  top: .55em;
  width: .9ch;
  height: 1px;
  background: rgba(0, 0, 0, .35);
}

.pc__cta {
  margin-top: auto;
  padding-top: clamp(16px, 1.4vw, 22px);
}

.pc__cta .btn {
  width: 100%;
  justify-content: center;
}

/* al pasar por encima, el círculo que crece dentro del botón es el degradado
   de marca (el mismo de .btn-primary), no el gris del tema; y el texto pasa
   a negro para seguir leyéndose sobre el pastel. .line ya transiciona color */
.pc .btn.btn-dark .btn-fill {
  background:
    radial-gradient(at 20% 28%, #5eead4 0px, transparent 55%),
    radial-gradient(at 80% 14%, #a78bfa 0px, transparent 52%),
    radial-gradient(at 66% 86%, #f472b6 0px, transparent 55%),
    radial-gradient(at 10% 74%, #67e8f9 0px, transparent 50%),
    radial-gradient(at 94% 64%, #818cf8 0px, transparent 50%),
    #8ee0e4;
}

.pc .btn.btn-dark:not(.btn-static):hover .btn-text {
  color: #0b0b0c;
}

/* ---- Custom: la misma ficha, a lo ancho -------------------------------- */

.pc--wide {
  margin-top: clamp(16px, 1.8vw, 28px);
}

.pc--wide .pc__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(24px, 2.4vw, 40px) var(--pc-pad);
}

.pc--wide .pc__big {
  margin-top: 0;
}

.pc__desc {
  margin: clamp(14px, 1.4vw, 22px) 0 0;
  max-width: 62ch;
  color: rgba(0, 0, 0, .72);
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 500;
  line-height: 1.45;
}

.pc__desc strong {
  color: #0b0b0c;
  font-weight: 700;
}

.pc--wide .pc__cta {
  margin: 0;
  padding: 0;
}

.pc--wide .pc__cta .btn {
  width: auto;
  white-space: nowrap;
}

.cep-note {
  margin: clamp(18px, 2vw, 30px) 0 0;
  color: rgba(255, 255, 255, .4);
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(12px, .95vw, 15px);
  line-height: 1.4;
}

/* ---- estrecho ----------------------------------------------------------- */

@media (max-width: 1099px) {
  /* una columna, pero no a todo el ancho: la ficha está proporcionada para
     una columna de tres */
  .cep-grid,
  .pc--wide {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }

  .pc--wide {
    margin-top: clamp(16px, 1.8vw, 28px);
  }

  .pc--wide .pc__body {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .pc--wide .pc__cta .btn {
    width: 100%;
    justify-content: center;
  }
}