/* GENERADO por diseno/scripts/construir.py desde componentes/<Comp>/<Comp>.css. No editar a mano. */

/* --- Boton --- */
/* Boton · estado: borrador · actualizado: 2026-10-22
 * Solo tokens. Los cuatro valores locales de abajo son estructurales y no tienen
 * token todavía (pendiente T-013): grosor de borde, contorno de foco, opacidad
 * de deshabilitado y tamaño de ícono. */
.pp-boton {
  --pp-boton-borde: 1px;
  --pp-boton-foco: 2px;
  --pp-boton-opacidad-deshabilitado: 0.4;
  --pp-boton-icono: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  box-sizing: border-box;
  margin: 0;
  padding: var(--espacio-1) var(--espacio-2);
  border: var(--pp-boton-borde) solid transparent;
  /* Misma forma en todas las variantes: la jerarquía la da el relleno, no la forma. */
  border-radius: var(--radio-chico);
  /* Tamaño e interlineado vienen de la clase .cuerpo (tokens.css); aquí solo el peso de rótulo. */
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duracion-instantaneo) var(--curva-salida), color var(--duracion-instantaneo) var(--curva-salida),
    transform var(--duracion-instantaneo) var(--curva-salida);
}

.pp-boton--primario {
  background: var(--tinta);
  color: var(--texto-invertido);
  border-color: var(--tinta);
}
.pp-boton--primario:hover {
  background: var(--tinta-suave);
  border-color: var(--tinta-suave);
}

.pp-boton--secundario {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}
.pp-boton--secundario:hover {
  background: var(--papel-200);
}

.pp-boton:active:not([aria-disabled="true"]) {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  .pp-boton {
    transition: none;
  }
  .pp-boton:active:not([aria-disabled="true"]) {
    transform: none;
  }
}

.pp-boton:focus-visible {
  outline: var(--pp-boton-foco) solid var(--tinta);
  outline-offset: var(--pp-boton-foco);
}

.pp-boton[aria-disabled="true"] {
  opacity: var(--pp-boton-opacidad-deshabilitado);
  cursor: not-allowed;
}
.pp-boton--primario[aria-disabled="true"]:hover {
  background: var(--tinta);
  border-color: var(--tinta);
}
.pp-boton--secundario[aria-disabled="true"]:hover {
  background: transparent;
}

.pp-boton--ancho-completo {
  display: flex;
  width: 100%;
}

.pp-boton__icono {
  display: inline-flex;
  flex: none;
}
.pp-boton__icono svg {
  width: var(--pp-boton-icono);
  height: var(--pp-boton-icono);
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

/* --- Campo --- */
/* Campo · estado: borrador · actualizado: 2026-10-22
 * Solo tokens. Los tres valores locales (grosor de borde, contorno de foco y
 * opacidad de deshabilitado) no tienen token todavía (pendiente T-013). */
.pp-campo {
  --pp-campo-borde: 1px;
  --pp-campo-foco: 2px;
  --pp-campo-opacidad-deshabilitado: 0.4;

  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.pp-campo__etiqueta {
  font-weight: 600;
  color: var(--tinta);
}

.pp-campo__control {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--espacio-1) var(--espacio-2);
  border: var(--pp-campo-borde) solid var(--tinta);
  border-radius: var(--radio-chico);
  background: var(--papel-200);
  color: var(--tinta);
  transition: border-color var(--duracion-instantaneo) var(--curva-salida);
}
.pp-campo__control::placeholder {
  color: var(--tinta-suave);
  opacity: 1;
}
textarea.pp-campo__control {
  resize: vertical;
  min-height: calc(var(--espacio-5) + var(--espacio-3));
}

.pp-campo__control:focus-visible {
  outline: var(--pp-campo-foco) solid var(--tinta);
  outline-offset: var(--pp-campo-foco);
}

.pp-campo__control:disabled {
  opacity: var(--pp-campo-opacidad-deshabilitado);
  cursor: not-allowed;
}

.pp-campo__ayuda {
  margin: 0;
  color: var(--tinta-suave);
}

/* Error: borde y mensaje en el color de error; el mensaje de texto siempre acompaña, el color solo no basta. */
.pp-campo--error .pp-campo__control {
  border-color: var(--error);
}
.pp-campo__error {
  margin: 0;
  color: var(--error);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .pp-campo__control {
    transition: none;
  }
}

/* --- Cinta --- */
/* Cinta · estado: borrador · actualizado: 2026-10-22
 * Solo tokens. La duración de la vuelta de la cinta animada es local: es un
 * movimiento continuo y los tokens duracion-* (máx. 800 ms) son para
 * interacciones (pendiente T-013). El tamaño de texto viene de .titulo-2. */
.pp-cinta {
  --pp-cinta-vuelta: 30s;
  --pp-cinta-punto: var(--espacio-1);

  box-sizing: border-box;
  overflow: hidden;
  padding: var(--espacio-2) var(--espacio-3);
}

.pp-cinta--tinta { background: var(--tinta); color: var(--texto-invertido); }
.pp-cinta--talleres { background: var(--servicio-talleres); color: var(--sobre-color); }
.pp-cinta--sesiones { background: var(--servicio-sesiones); color: var(--sobre-color); }
.pp-cinta--entender { background: var(--servicio-entender); color: var(--sobre-color); }
.pp-cinta--soluciones { background: var(--servicio-soluciones); color: var(--sobre-color); }

.pp-cinta__pista {
  display: flex;
}

.pp-cinta__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Punto entre frases. Estática: va detrás de cada frase (menos la última), así al pasar a otra
 * línea ninguna empieza con punto. Animada: va delante, para que el bucle cierre sin saltos. */
.pp-cinta__frase {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.pp-cinta__frase::before,
.pp-cinta__frase::after {
  flex: none;
  width: var(--pp-cinta-punto);
  height: var(--pp-cinta-punto);
  margin: 0 var(--espacio-3);
  border-radius: var(--radio-pildora);
  background: currentColor;
}
.pp-cinta:not(.pp-cinta--animada) .pp-cinta__frase:not(:last-child)::after {
  content: "";
}
.pp-cinta--animada .pp-cinta__frase::before {
  content: "";
}

/* Animada: una vuelta continua, a la izquierda; la segunda lista cubre el hueco. */
.pp-cinta--animada .pp-cinta__pista {
  width: max-content;
  animation: pp-cinta-vuelta var(--pp-cinta-vuelta) linear infinite;
}
.pp-cinta--animada .pp-cinta__lista {
  flex-wrap: nowrap;
  flex: none;
}
@keyframes pp-cinta-vuelta {
  to { transform: translateX(-50%); }
}

/* Movimiento reducido: la cinta se queda quieta, sin la copia, y las frases pasan a otra línea si no caben. */
@media (prefers-reduced-motion: reduce) {
  .pp-cinta--animada .pp-cinta__pista {
    animation: none;
    width: auto;
  }
  .pp-cinta--animada .pp-cinta__lista[aria-hidden="true"] {
    display: none;
  }
  .pp-cinta--animada .pp-cinta__lista {
    flex-wrap: wrap;
  }
  .pp-cinta--animada .pp-cinta__frase::before {
    content: none;
  }
  .pp-cinta--animada .pp-cinta__frase:not(:last-child)::after {
    content: "";
  }
}

/* --- Logotipo --- */
/* Logotipo · estado: borrador · actualizado: 2026-10-22
 * Solo tokens. El tamaño y el interlineado vienen de las clases display-xl,
 * display-l y titulo-1 (tokens.css); aquí se fuerza el peso 800 del logotipo. */
.pp-logotipo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-1);
}

.pp-logotipo__marca {
  font-weight: 800;
  text-transform: lowercase;
  white-space: nowrap;
}

.pp-logotipo__bajada {
  color: inherit;
}

.pp-logotipo--sobre-papel { color: var(--tinta); }
.pp-logotipo--sobre-tinta { color: var(--texto-invertido); }

/* Sobre tinta el punto va en lima; en Noche la tinta es crema y la lima no se ve, así que el punto sigue al texto. */
.pp-logotipo--sobre-tinta .pp-logotipo__punto { color: var(--acento); }
[data-theme="dark"] .pp-logotipo--sobre-tinta .pp-logotipo__punto { color: inherit; }

/* --- Movimiento --- */
/* Movimiento · estado: borrador · actualizado: 2026-10-22
 * Solo tokens. Oculta los elementos marcados hasta que aparecer() los anima;
 * la clase pp-movimiento la pone Movimiento.js solo si el movimiento está permitido. */
.pp-movimiento [data-pp-aparecer] {
  opacity: 0;
}

/* Microinteracciones de estado: CSS, sin JS. */
.pp-presionable {
  transition: transform var(--duracion-instantaneo) var(--curva-salida);
}
.pp-presionable:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .pp-presionable,
  .pp-presionable:active {
    transition: none;
    transform: none;
  }
}

/* --- Pastilla --- */
/* Pastilla · estado: borrador · actualizado: 2026-10-22
 * Solo tokens. El grosor de borde es local (pendiente T-013). El tamaño y la
 * mayúscula vienen de la clase .etiqueta (tokens.css). */
.pp-pastilla {
  --pp-pastilla-borde: 1px;

  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: calc(var(--espacio-1) / 2) var(--espacio-2);
  border: var(--pp-pastilla-borde) solid var(--tinta);
  border-radius: var(--radio-pildora);
  background: transparent;
  color: var(--tinta);
  white-space: nowrap;
}

/* Con color de servicio: bloque plano, sin borde visible, texto sobre-color. */
.pp-pastilla--talleres,
.pp-pastilla--sesiones,
.pp-pastilla--entender,
.pp-pastilla--soluciones {
  border-color: transparent;
  color: var(--sobre-color);
}
.pp-pastilla--talleres { background: var(--servicio-talleres); }
.pp-pastilla--sesiones { background: var(--servicio-sesiones); }
.pp-pastilla--entender { background: var(--servicio-entender); }
.pp-pastilla--soluciones { background: var(--servicio-soluciones); }

/* --- Tarjeta --- */
/* Tarjeta · estado: borrador · actualizado: 2026-10-22
 * Solo tokens. El grosor del borde es local (pendiente T-013). Los tamaños de
 * texto vienen de .titulo-2 y .cuerpo (tokens.css). */
.pp-tarjeta {
  --pp-tarjeta-borde: 1px;

  box-sizing: border-box;
  padding: var(--espacio-3);
  border: var(--pp-tarjeta-borde) solid var(--linea-suave);
  border-radius: var(--radio-tarjeta);
  background: var(--papel-200);
  color: var(--tinta);
}

.pp-tarjeta__titulo {
  margin: 0 0 var(--espacio-2);
}

.pp-tarjeta__cuerpo > :first-child { margin-top: 0; }
.pp-tarjeta__cuerpo > :last-child { margin-bottom: 0; }

/* Reactiva (opt-in): la tarjeta no cambia; al pasar el cursor o enfocar algo dentro, solo se
 * «enciende» la Pastilla neutra que lleva (fondo tinta, texto invertido). Las pastillas de color
 * de servicio no cambian. */
.pp-tarjeta--reactiva .pp-pastilla:not([class*="pp-pastilla--"]) {
  transition: background-color var(--duracion-rapido) var(--curva-salida), color var(--duracion-rapido) var(--curva-salida);
}
@media (hover: hover) {
  .pp-tarjeta--reactiva:hover .pp-pastilla:not([class*="pp-pastilla--"]) {
    background: var(--tinta);
    color: var(--texto-invertido);
  }
}
.pp-tarjeta--reactiva:focus-within .pp-pastilla:not([class*="pp-pastilla--"]) {
  background: var(--tinta);
  color: var(--texto-invertido);
}

@media (prefers-reduced-motion: reduce) {
  .pp-tarjeta--reactiva .pp-pastilla {
    transition: none;
  }
}

/* --- TarjetaServicio --- */
/* TarjetaServicio · estado: borrador · actualizado: 2026-10-22
 * Solo tokens. El grosor del divisor es local (pendiente T-013). Los tamaños de
 * texto vienen de las clases .etiqueta, .titulo-2 y .cuerpo-chico (tokens.css). */
.pp-tarjeta-servicio {
  --pp-tarjeta-servicio-borde: 1px;
  --pp-tarjeta-servicio-elevacion: 4px;

  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--espacio-3);
  border-radius: var(--radio-tarjeta);
  color: var(--sobre-color);
}

.pp-tarjeta-servicio--talleres { background: var(--servicio-talleres); }
.pp-tarjeta-servicio--sesiones { background: var(--servicio-sesiones); }
.pp-tarjeta-servicio--entender { background: var(--servicio-entender); }
.pp-tarjeta-servicio--soluciones { background: var(--servicio-soluciones); }

.pp-tarjeta-servicio__numero {
  margin: 0 0 var(--espacio-4);
}

.pp-tarjeta-servicio__titulo {
  margin: 0 0 var(--espacio-2);
}

.pp-tarjeta-servicio__cuerpo {
  margin: 0 0 var(--espacio-2);
}
.pp-tarjeta-servicio__cuerpo > :first-child { margin-top: 0; }
.pp-tarjeta-servicio__cuerpo > :last-child { margin-bottom: 0; }

/* Divisor de 1px en sobre-color sobre cada fila: separa título y filas sin cerrar la tarjeta. */
.pp-tarjeta-servicio__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-tarjeta-servicio__item {
  padding: var(--espacio-1) 0;
  border-top: var(--pp-tarjeta-servicio-borde) solid var(--sobre-color);
}

/* Reactiva (opt-in): sube un poco al pasar el cursor o al enfocar algo dentro. Solo desplazamiento,
 * sin sombra ni cambio de color. Con movimiento reducido no se mueve. */
.pp-tarjeta-servicio--reactiva {
  transition: transform var(--duracion-rapido) var(--curva-salida);
}
@media (hover: hover) {
  .pp-tarjeta-servicio--reactiva:hover {
    transform: translateY(calc(-1 * var(--pp-tarjeta-servicio-elevacion)));
  }
}
.pp-tarjeta-servicio--reactiva:focus-within {
  transform: translateY(calc(-1 * var(--pp-tarjeta-servicio-elevacion)));
}
@media (prefers-reduced-motion: reduce) {
  .pp-tarjeta-servicio--reactiva,
  .pp-tarjeta-servicio--reactiva:hover,
  .pp-tarjeta-servicio--reactiva:focus-within {
    transition: none;
    transform: none;
  }
}